Here’s a couple of responsive design techniques on displaying images using Bootstrap.
<div class="container">
<div class="row text-center">
<h3>2-Column In Uneven Height</h3><br>
<div class="col-sm-6 col-xs-12">
<img src="https://live.staticflickr.com/65535/50677938021_168535b399_n.jpg" class="img-responsive">
<br>
<b>Image 1</b>
<br class="visible-xs">
<br class="visible-xs">
</div>
<div class="col-sm-6 col-xs-12">
<img src="https://live.staticflickr.com/65535/50619594802_19a71c47df_n.jpg" class="img-responsive">
<br>
<b>Image 2</b>
</div>
</div>
</div>
Bootstrap is awesome! As you see, no extra CSS needed.
What about maintaining the same exact height? Check-out the next one.
<div class="container">
<div class="row text-center">
<h3>2-Column Layout With Even Height</h3><br>
<div class="col-sm-6 col-xs-12">
<div>
<img src="https://live.staticflickr.com/65535/50420227283_3074b8341b_n.jpg">
</div>
<br>
<b>Image 1</b>
<br class="visible-xs">
<br class="visible-xs">
</div>
<div class="col-sm-6 col-xs-12">
<div>
<img src="https://live.staticflickr.com/65535/50402829298_03479b2edf_n.jpg">
</div>
<br>
<b>Image 2</b>
</div>
</div>
</div>
And a few CSS to prevent the images from being stretched or shrinked.
[class*=' col-'] > div{
height: 330px;
position: relative;
overflow: hidden;
}
[class*=' col-'] img{
position: absolute;
left:0;
top:0;
width: 500px;
max-width: none;
}