Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 responsive images side by side same height

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!

like image 671
l00per Avatar asked Jan 20 '14 12:01

l00per


People also ask

How do I put text and images side by side in bootstrap?

To create image and text side by side use the grid system property of bootstrap and create 2 columns of span 6-6. Put your image in one column and your text in another. On smaller devices, it will automatically align vertically.


3 Answers

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>
like image 122
wpdaniel Avatar answered Oct 17 '22 21:10

wpdaniel


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

jsfiddledemo

like image 39
foxdie Avatar answered Sep 16 '22 17:09

foxdie


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

like image 1
BENARD Patrick Avatar answered Oct 17 '22 20:10

BENARD Patrick