The image is not adapting to different screen sizes

Issue with Image Display

Original Image size : 463px X 339px

Unfortunately, the image has been removed to adhere to copyright policies.

HTML Code Snippet

<div class="col-md-4">
  <div class="item-block event-details" id="video-container">
     <img src="/Resources/images/6b0c5d49-9a76-4a09-afb7-5bfa2ed508f7.jpg" class="img-responsive">
  </div>

CSS Styling Information

.item-block.event-details {
position: relative;
overflow: hidden;
height: 214px;
}

.item-block {
color: #4b4e4e;
border-radius: 4px;
border: 1px solid #d4d4d4;
box-shadow: 0px 1px 1px #b0b6b6;
position: relative;
margin-bottom: 30px;
}

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

Query : Why isn't the whole image fitting into the parent div as intended? Can you identify the reason behind this issue?

htmlcsstwitter-bootstrap

Answer №1

In case the parent div requires that specific height, you can ensure both max-width and max-height are set to 100%

.responsive-image {
    display: block;
    margin: 0 auto; /* centers the image horizontally in parent div */
    max-width: 100%;
    max-height: 100%;
}

Answer №2

My suggestion is to make a change in your .img-responsive css class by switching things up. How about this:

.img-responsive {
    display: block;
    width: 100%;
max-height: auto;
}

Answer №3

No need to write any additional code

To make images responsive, simply add the following CSS:

.img-responsive {
 display: block;
 width: 100%;
 max-height: 100%;
}

If you are using bootstrap, you can just apply the class .img-responsive to your img tag. See Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alignment of elements in the div seems to be slightly skewed

Currently, I am in the process of creating a website with the temporary name yeet.io. I am facing an issue where I am attempting to center both an input and h1 element inside a div vertically and horizontally, but they keep appearing misaligned for some r ...

javascriptjqueryhtmlcss

Tips for achieving a repeating transparent background image

I am trying to achieve a similar effect as shown in this example: http://jsfiddle.net/abalter/k8G3C/ The background image I'm using is transparent with the logo and text overlaying it. My issue arises when I set the background image to repeat-y. It ...

cssbackground-imagetransparencyopacitybackground-repeat

I would like for this message to appear periodically following the initial execution

I have developed a unique welcome feature using HTML and CSS that I would like to showcase intermittently. --------------------------- My Desired Outcome --------------------------- Initially, this feature should be triggered once (when a user first acce ...

javascripthtmlcssanimation

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

initializeSelection() { for (var i = 0; i < this.groupedContacts.length; i++) { for(var j = 0; j < this.groupedContacts[i].length; j++) this.groupedContacts[i][j].selected = this.selectedAll; } } evaluateSelectionStatus() { ...

javascripthtmlangularionic2

Is it possible to incorporate HTML tags within the <template> section of AIML files?

My goal is to create a simple bot using an AIML file. The idea is that I can input a question and the corresponding pattern will be returned from the file. For instance, I have this sample pattern in my AIML file: <category> <pattern>TEST& ...

pythonhtmlartificial-intelligenceaiml

What is the best way to include a swf video in a list of hyperlinks?

My current code displays an image inside a box, and I am looking to replace the image with either a swf video or .AVI video. I have the object video code to play a swf video, but I need the video to be played within the box where the image is currently l ...

javascripthtmlflashswfobject

Update the identifiers and titles for duplicated elements

On my form, users can input multiple delegate details. Here's a snippet of the HTML code: <div id="Delegate1" class="clonedInput"> <h4 id="reference" name="reference" class="heading-reference">Delegate #1</h4> ...

jqueryhtmldom

Bootstrap enables focusing the input field when the button is clicked

This Bootstrap 4 collapse example code is mainly focused on showcasing how to create collapsible elements. For more information, you can visit https://getbootstrap.com/docs/4.0/components/collapse/ <p> <button class="btn btn-primary" t ...

javascripthtmltwitter-bootstrapbootstrap-4

Positioning the subheading "perfectly beneath the main heading" for a clean and professional look

I'm feeling a bit lost when it comes to tasks like this. While I can easily design an entire website using html and css, I start to question my approach when faced with challenges like these. Could someone offer some guidance? My goal is to have a H1 ...

htmlcsslayout

how can I incorporate PHP paths in my CSS?

I am attempting to assign a path to an image using a PHP variable in CSS, as demonstrated below: <?php $path= "www.ghhelpline.com/hello/images/" ?> <style> .hello { background-image: url("<?php echo $path;?>new.png") ...

phpcss

Preventing the creation of redundant database records in Django

Currently, I have a form in the settings that saves user entries into the Django SQLite database. It is essential to prevent users from entering duplicate settings with the same name. I attempted to use a for loop to verify if the data already exists but ...

pythonhtmldjangodjango-modelsdjango-forms

Rearrange the bootstrap col to be placed at the bottom without using absolute

I currently have three blocks structured like this: <div class="col-sm-6 col-xs-12 left-top"></div> <div class="col-sm-6 col-xs-12 right-top"> <div class="col-sm-6 col-xs-12 left-bottom"></div> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Vertically align header 3 text with a specific height

Recently, I encountered an issue with a h3 <h3>someText<h3> This particular h3 has a height and features a background image h3 { height:30px; background-image:url(); background-reat: repeat-x; } I am currently facing a challenge where the t ...

css

Issue with Changing Active Class in Bootstrap Menu

I have been attempting various approaches to change the active class on a Bootstrap navbar (in Bootstrap 4), but I am facing difficulties. Each time I click on a new menu option, it momentarily changes to the active class before reverting back to 'hom ...

javascriptcsstwitter-bootstrapbootstrap-4

Is there a way to keep my SVG aligned with the edge of the screen?

Hello, I'm new to CSS and currently attempting a front-end mentor challenge. However, I've hit a roadblock while trying to replicate this design. Here is the image I am trying to recreate: https://i.sstatic.net/7HmTg.png I'm struggling wi ...

css

Struggling to get the onHover effect working with the Grid item component in MaterialUI

I'm currently working on a Grid layout with nested Grid components, but I've run into an issue where applying inline styles to the Grid item component isn't working as expected. As a newcomer to MaterialUI in ReactJS, I could really use some ...

cssreactjsmaterial-uihover

Header that sticks to the top of the page while the image slowly fades

Can anyone help me with my jsfiddle? I have a sticky header that shrinks when scrolling down, along with a png overlay that also shrinks. However, the current animation looks bad. I tried using fadeIn with jQuery but it's not working as expected. How ...

jquerycssheader

Flask - Issue with Bootstrap Navbar Dropdown not functioning properly on secondary pages

My navbar includes a dropdown link in base.html that is functioning properly on most pages, except for certain sub-pages. It works on: index/ dashboard/ users/user123/ However, it does not work on the following page (clicking "Dropdown Menu" does nothin ...

javascripthtmltwitter-bootstrapflaskbootstrap-4

Is there a way to make the footer adapt to the varying heights of the grid sections as they grow in size?

Currently, I am facing an issue with the positioning of the page footer. Despite my efforts, it does not remain at the bottom as intended. Please refer to the image for a visual representation of the problem. How can this be rectified? It is worth noting ...

htmlcsstwitter-bootstrap-3

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

I need help with a jQuery sortable feature where I have two lists and can move items between them: $( '#productsList, #orderList' ) .sortable({connectWith: '.containerDiv'}) .disableSelection(); My issue arises when I try to implement ...

javascriptjqueryhtmlcss