0

I have three different size responsive images in two columns and I want an image in the first column to be the same height as two images in the second column including margin-bottom 25 pixels. I am using Bootstrap (3.3.5).

.portfolio-item {
    margin-bottom: 25px;
}
<div class="row">
  
  <div class="col-xs-5">
    <img class="portfolio-item img-responsive" src="http://res.cloudinary.com/dsie3eeqb/image/upload/v1443796067/mycab1-lg_qx4vue.png">
  </div>
  
  <div class="col-xs-7">
    <img class="portfolio-item img-responsive" src="http://res.cloudinary.com/dsie3eeqb/image/upload/v1443796064/mycab3-lg_ubywxj.png">
    <img class="portfolio-item img-responsive" src="http://res.cloudinary.com/dsie3eeqb/image/upload/v1443796063/mycab2-lg_gh5e0z.png">
  </div>    

</div>

Here is the link on CodePen - http://codepen.io/sergiikovbasiuk/pen/meWrXK

456xe
  • 11
  • 4
  • You can use equal height in Jquery for this please see http://stackoverflow.com/questions/11688250/setting-equal-heights-for-divs-with-jquery post – Yogesh Sharma Oct 05 '15 at 12:39
  • Does it need to be IE9 backwards compatible? – Jay Oct 05 '15 at 12:56
  • A rough code for your example might be something like: http://codepen.io/anon/pen/yYbLLz. It should be IE9 compatible. – sdvnksv Oct 05 '15 at 13:03
  • @Deka87unfortunately this works only for one screen-size and I need it to be responsive. Everything goes wrong if I resize the window. – 456xe Oct 05 '15 at 13:27
  • @jay yes, it should be IE9 compatible – 456xe Oct 05 '15 at 13:30
  • That makes it more awkward. Bootstrap has a predefined class call `.row-eq-height` which is designed for that exact purpose. Sadly it uses flexbox which is no good on older versions of IE. – Jay Oct 05 '15 at 14:36

0 Answers0