How to keep responsive images same height?

Question

I have a webpage that I'm making, and I have one row with a cover photo and profile picture side-by side. I have them both in a bootstrap row in different-sized grids. But, the profile picture is always extending lower than the cover photo (it's height is larger). How do I keep them responsive, but the same height? My ultimate goal is have them look like a single strip (with padding between), and then stack when window is mobile-sized.

<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 have tried restricting the height of the row div, setting it to a specific height, and switching up the bootstrap grid to be col-md, or col-sm in different proportions. Any wisdom is much appreciated.

score 5 · Accepted Answer · answered Jan 25 '15 at 03:21

5

use min-height on them

try

img {
min-height:100%
}

if that doesn't work use a fixed max-height

img {
min-height:4em;
}

answered Jan 25 '15 at 03:21

Dom Adams

281
2
11

it seems to me this solution has issues on different browses (setting image's width:auto creates large images in IE, width 100% causes stretching of images with different ratios in the same row) unless you set `flex:` of image container to image width/image height. This can be done by preprocessor or php. As here - https://codepen.io/blimpage/pen/obWdgp – Fanky Feb 17 '18 at 17:29

Iqbal Kabir · Answer 2 · 2015-01-25T06:56:13.247

4

You can use 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/

edited Jan 25 '15 at 06:56

answered Jan 25 '15 at 06:41

Iqbal Kabir

1,518
10
16

Thanks for responding, but for some reason this didn't work for me. copied your code exactly and I understand it all, but for some reason it's not working at all. Profile picture still extends lower than cover photo – singmotor Jan 29 '15 at 05:03
Above codes only work for screen width 768px and above. Make sure you tested them in such a screen. Notice, In my JSFiddle link, I used `col-xs-8` and I did not use `@media (min-width:768px)`. So it works for all screen sizes. Or, upto cover image/stripe is higher than 99px. – Iqbal Kabir Jan 29 '15 at 11:09
Yea, I copied the code from the js fiddle and it still fails to line up. Upon inspect element, It looks like the cover photo div is equally matching the height of the profile picture, but the cover photo itself is not. – singmotor Jan 29 '15 at 17:54
Did you call Bootstrap CSS before given CSS codes? `` – Iqbal Kabir Jan 29 '15 at 18:30
Yes, bootstrap is the first stylesheet imported, my custom stylesheet (where I added your code) is the last/most recent – singmotor Jan 29 '15 at 19:22
For a full-width hero image, change the CSS for`profile-pic` to `width: 100%; height: auto;` – Michael McGinnis Dec 10 '15 at 20:17

score 0 · Answer 3 · answered Aug 08 '17 at 22:45

None of the above worked for me, but this did:

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*/
}

How to keep responsive images same height?

3 Answers3

Linked