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..

    How to prevent conflicts between css rules

    how to set icon and text inline on header of in phonegap app?

    How to switch position of 2 divs using only CSS?

    How to cancel specific one element at external CSS?

    How can i create a hexagon shape with an image inside? [duplicate]

    How to use the not selector correctly in CSS [duplicate]

    how can i add class to errorsummay without remove header message

    How to get use the functionality same as “-webkit-appearance” in firefox?

    Show overlay fullscreen div then hide it by clicking on it

    how to use automatic css hyphens with word-break: break-all?

    How can I avoid space while using pseudo-elements in multi-line markup?

    How to validate HTML with RSS?

    How to reject specify HTML tags by using css or xpath selector

    How To Do Multiple Hover On List

    How to position background image in a button

    CSS: How to add icon/image after input element

    How to draw grid around irregularly arranged web elements?

    How to add space using css?

    Where do I put my CSS, how do I link to it from the master page?

    How to apply my class from css to checkbox? [duplicate]

    How do you read !important in CSS?

    How to disable mask on selected image in the f/ckeditor in webkit, opera browsers?

    How can I restrict this CSS container to only containing the div its declared in?

    tooltip pointer is showing downwards to the left of the hyper link

    how to use css to display multiple posts in inline-block like google+

    how to resolve border-radius property issue in all versions of browsers? [duplicate]

    overlaping text with different styles over image, prevent text of one style to be shown on top of the text of another style

    Sencha Touch 2: how to remove right arrow of datepickerfield by using css?

    How to make this CSS compatible with IE browsers? [closed]

    How to manage magento CSS file with over 10,000 lines?