How do I get responsive images to stay equivalent heights as they scale?


Tags: css,image,twitter-bootstrap,twitter-bootstrap-3

Problem :

I am using Bootstrap 3 right now on a website project. I am having problems using img-responsive to make my images responsive.

What I want is 4 images side by side in a container that are all the same height and scale together as the screen size changes.

Following the Bootstrap grid system, I have the images taking up a total of 12 columns.

1 = Leftmost image 2 = Second image 3 = Third image from left 4 = Rightmost image

1 - 3 cols, 960x640 2 = 2 columns, 640x640 3 = 4 columns, 1280x640 4 = 3 columns, 960x640

HTML:

<div class="container">
 <div class="row">
  <div class="col-md-3">
    <img class="responsive" src="/image/1.jpg" />
  </div>
  <div class="col-md-2">
    <img class="responsive" src="/image/2.jpg" />
  </div>
  <div class="col-md-4">
    <img class="responsive" src="/image/3.jpg" />
  </div>
  <div class="col-md-3">
    <img class="responsive" src="/image/4.jpg" />
  </div>
</div>

How do I make sure they are all the same height as they scale? Right now all images simply have img-responsive as a class, making their max-width 100%, height set on auto, and display as block.

CSS:

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


Solution :

Thought of another, simpler way of doing this, when addressing another question... Just override the col-md-* padding by adding a custom class. No media query required.

Example: http://www.bootply.com/utGXpeBgE2

HTML

<div class="col-md-2 no-pad">
  <img ...

CSS

.no-pad{
  padding-left:0px;
  padding-right:0px;
}

    CSS Howto..

    CSS Web fonts how to use it with use of @font-face its not working

    How to change font color inside nav element?

    How do I use a sprite background image to display once on an element (no-repeat)?

    How to change this CSS code to get required layout

    Twitter widget covers up another div that might appear over it . How to make twitter widget appear under?

    How to style author id in WordPress?

    Show/Hide Div's via | Save Scrollbar | Save State

    How to Limit the Div Exactly into the Screen Size

    How to style Bootstrap menu like a V? [closed]

    How to detect if my search bar has been expanded?

    Jquery: How to make the content showup below the navigation bar when the anchor link is clicked?

    CSS/Menu: How to position element right below/beside elements

    How to start different elements on different keyframes of an animation in CSS

    How can I add an image to a
  • tag dynamically
  • (some) background images won't show up in IE7 or IE8

    How do I vertically center my navigation bar?

    How to resize button without cutting the text inside

    How to create centered image slideshow behind website content

    How do you size an SWF object based on a Blueprint CSS span range?

    How to make <'details'> drop down on mouse hover

    How to workaround: IE6 does not support CSS “attribute” selectors

    How to remove or reset CSS style using JS?

    How to get :before selector behind its box?

    How to adapt a flex div's width to content

    CSS how to not use style

    Show/Hide function between JS, CSS, and HTML

    within mdl-card__supporting-text not properly shown

    How to make fonts display on web cross-platform?

    How to get rid of the left and top margins in css when using html2pdf

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly