CODEWITHSUNDEEP
cssimagetwitter-bootstraptwitter-bootstrap-3
Zach Cook
Zach Cook

Reputation: 614

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

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;
}

Upvotes: 0

Views: 5066

Answers (2)

Shawn Taylor
Shawn Taylor

Reputation: 15740

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;
}

Upvotes: 1

Shawn Taylor
Shawn Taylor

Reputation: 15740

Your images are not displayed at full height when their widths are constricted by the next image. You need to add position:absolute to get around this. However that causes a problem when screen below the col-md threshold (992px), so only add it when above it, by way of @media query

@media(min-width:992px){
  .img-responsive{
      position:absolute;
  }
}

HTML

  <div class="col-md-3">
    <img class="img-responsive" src="//placehold.it/960x640/eee">
   </div>

  <div class="col-md-2">
    <img class="img-responsive" src="//placehold.it/640x640/ddd">
    </div>

   <div class="col-md-4">
     <img class="img-responsive" src="//placehold.it/1280x640/eee">
   </div>

   <div class="col-md-3">
     <img class="img-responsive" src="//placehold.it/960x640/ddd">
   </div>

See example: http://www.bootply.com/11BDvXAx9y

Upvotes: 0

Related Questions