Bootstrap 3 responsive images side by side same height

Question

Is it possible to use 2 responsive images side by side with same height with Bootstrap 3 ? At the moment the col-sm-4 hasn't the same height.

<div class="container">
    <div class="row">                                     
        <div class="col-sm-4">                 
            <img class="img-responsive" src="http://placehold.it/400x400" />
        </div>                  
        <div class="col-sm-8">
            <img class="img-responsive" src="http://placehold.it/800x400" />
        </div>                  
    </div>
</div>

Demo Fiddle: http://jsfiddle.net/u9av6/3/

Thanks!

Answer 1

try this:

<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>

<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>

Answer 2

here's my solution with a simple wrapper. The idea is to deal with the aspect ratio :

jsfiddle demo

Answer 3

Here's a working version, with jsfiddle demo .

<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>                       
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>

Answer 4

Maybe your problem is that in your code, the padding is not considering.

Your 400px and 800px is nice, but with padding considering it's not good.

In this fiddle : http://jsfiddle.net/Lrc5t/1/ , with no padding, they keep the same height. But it's not nice without padding...

The padding in each .row is 15px left and right.

html:

<div class="row">                   
    <div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>                       
    <div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>              
</div>

css:

.nopadding{
    padding-left: 0px !important;
    padding-right:0px !important;    
}

UPDATE :

fiddle : http://jsfiddle.net/Lrc5t/2/

Without paddding is not nice so , just inverse in adding extra padding to right image :

<div class="row">

<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>

<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>

</div>

.nopadding-two{
    padding-right:45px !important;
}

ps : You can choose to add your padding at left instead or right... in order to keep the padding in middle. And... nopadding-one and text-right class are to delete...(I forgot)...

UPDATE AFTER COMMENT: * Why 45px ? * Image 1 is float:left so it has just the padding-right at 15px Image 2 has padding left and right at 15px {=30px} So in order do equality (to get same constraints) you need to transmit the total padding to image 2

Answer 5

To make the images displaying side by side, you need to do three things:

1st : make all your images responsive in the html file like this:

<div class="row">

      <div class="col-xs-3 left-image"  >

        <img  class="img-responsive" src="../img/fourthimg.jpg">
      </div>
      <div class="col-xs-9 right-image">

          <img class="img-responsive" src="../img/firstimg.jpg" >

     </div>

    </div>

This is for putting two images side by side. You could have as many images as possible.

2nd: Inside your css, give the height to these images like this:

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

The width is set to 100% meaning that both (for this example)/all the images would cover the 100% part of the column width provided in your html code.

3rd (Most important) : CSS has this property to automatically leave margins/paddings on right and left when you put an image inside a div and this padding is associated with the image or any other element that you want to put inside a div.

To tackle this, go to you css file and for each image, set the left-padding and right padding to 0px just like this:

.right-image{
padding-left:0px;
padding-right:0px;

}


.left-image{

 padding-right: 0px;
 padding-left: 0px;


}

This is a working example and explanation of how to put in images side by side using bootstrap!

Answer 6

Check this code. This code will look for the smallest height of the image and set it as max-height of the other images. The rest of the image will be hidden. Check it out.

<script>
   setTimeout(function () {
      equalheight('.portfolio-item');
   }, 3000);
   function equalheight($that) {
      $minHeight = 0;
      $($that).each(function (index) {
         $thisHeight = $(this).children('.portfolio-link').innerHeight();
         if ($minHeight == 0) {
            $minHeight = $thisHeight;
         } else {
            if ($minHeight > $thisHeight) {
               $minHeight = $thisHeight;
            }
         }
      });
      $($that).children('.portfolio-link').css('max-height', $minHeight);
      $($that).children('.portfolio-link').css('overflow', 'hidden');
   }
</script>

My html is

                <div class="col-md-4 col-sm-6 portfolio-item">
                  <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
                     <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                           <i class="fa fa-plus fa-3x"></i>
                        </div>
                     </div>
                     <img src="images/trip-01.jpg" class="img-responsive" alt="">
                  </a>
                  <div class="portfolio-caption">
                     <h4>Round Icons</h4>
                     <p class="text-muted">Graphic Design</p>
                  </div>
               </div>
               <div class="col-md-4 col-sm-6 portfolio-item">
                  <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
                     <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                           <i class="fa fa-plus fa-3x"></i>
                        </div>
                     </div>
                     <img src="images/trip-02.jpg" class="img-responsive" alt="">
                  </a>
                  <div class="portfolio-caption">
                     <h4>Startup Framework</h4>
                     <p class="text-muted">Website Design</p>
                  </div>
               </div>

Answer 7

if you want constant height, should add these properties:

height: 200x ;   # any constant height
object-fit: cover;

Or else you want width constant, should add these properties:

width: 200px ;  # any constant height
object-fit: cover;

object-fit: cover, fixed the problem of stretching up of the image in my case.