How to keep responsive images of the same height?

Question

I have a web page that I create and I have one line with a cover photo and a profile picture next to it. I have both of them in the boot line in grids of different sizes. But the profile image always spreads lower than the cover photo (the height is greater). How can I keep them responsive, but with the same height? My ultimate goal is to make them look like a single strip (with padding in between), and then fold when the window is the size of a mobile.

<div class="row"> <div class="col-lg-8"> <img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo"> </div> <div class="col-lg-4"> <img src="http://placehold.it/200x200" class="img-responsive" alt="Profile Picture"> </div> </div> 

I tried to limit the height of the div line by setting it to a specific height and switching the bootstrap grid to col-md or col-sm in different proportions. Any wisdom is greatly appreciated.

Answer 1

use min-height for them

try

 img { min-height:100% } 

if this does not work, use a fixed maximum height

 img { min-height:4em; } 

Answer 2

You can use the following codes.

HTML

 <div class="row cover-row"> <div class="col-sm-8"> <img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo"> </div> <div class="col-sm-4 profile-wrap"> <img src="http://placehold.it/200x200" class="img-responsive profile-pic" alt="Profile Picture"> </div> </div> 

CSS

 /* Desktop and Tablet Screens */ @media (min-width:768px) { .cover-row { position: relative; min-height: 100px; /* minimum height of cover stripe */ } .profile-wrap { position: absolute; right: 0; top: 0; height: 100%; overflow: hidden; } .profile-pic { width: auto; /* maintain width/height aspect ratio */ height: 100%; } } 

JSFiddle link http://jsfiddle.net/feh4ex3p/

Answer 3

None of the above worked for me, but it happened:

HTML

 <div class="row cover-row"> <div class="col-sm-8"> <img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo"> </div> <div class="col-sm-4 profile-wrap"> <img src="http://placehold.it/200x200" class="img-responsive profile-pic" alt="Profile Picture"> </div> 

CSS

 .profile-pic { width: 100%; /* maintain width/height aspect ratio */ height: 500px; /*I realized this doesnt seem responsive, but no percentages work for me but it appears fine on mobile*/ }