Image expanding larger than parent div

Question

I have a div that contains an image. I want the image to resize with the div, but I do not want the image to ever have a height greater than 480px. I will post what I have below. It resizes with the div correctly, but it does not obey the max-height. If I move the mx height to the img css it does, but it will not resize then. I'm sure its something simple, but I can't seem to get it.

.feature_image {    
    max-height:480px
}

.feature_image img{
    height: 100%;
    width: 100%;
}

And here is the HTML

<div class="feature_image">
        <img src="img/main-featured-image.png"/>
    </div>

That does not scale proportionally – user3167249 Sep 02 '14 at 21:14 — user3167249, Sep 02 '14 at 21:14

score 18 · Answer 1 · edited Sep 02 '14 at 21:06

18

Have you tried putting a display:block?

Full CSS would look like:

.feature_image img {height: 100%; width: 100%; display:block;}

edited Sep 02 '14 at 21:06

David Bohunek

3,181
1
21
26

answered Sep 02 '14 at 20:19

Johnny

459
3
5

Billal Begueradj · Answer 2 · 2018-08-29T13:41:22.577

The reason behind your issue is that you did not specify the width of the container but, in the same time, you set a width: 100%; for the image.

I tested this with and it works just fine:

.feature_image {    
    height: 480px;
    width: 480px;
}

.feature_image img{
    height: 100%;
    width: 100%;
}

This solution is good for small images, however it causes large images to distort, but there are solutions to overcome it.

score 5 · Answer 3 · answered Sep 02 '14 at 20:17

5

You need to specify not only max-height; but also height in order to use height 100% for the image! :) CSS has no idea what 100% of to inherit. I hope you get it.

.feature_image {    
    max-height:480px;
    height: 480px;
}

.feature_image img{
    height: 100%;
    width: 100%;
}

answered Sep 02 '14 at 20:17

Cowwando

450
5
11

3

That distorts the image because with is not resized proportionally – user3167249 Sep 02 '14 at 21:04
You need to choose either portrait or landscape proportion of your images! So basically you can set height/width to a certain value and auto-resize the width/height of the image according to their propotions. There is no other option besides 'cropping' them by putting them in div container with overflow: hidden :) – Cowwando Sep 02 '14 at 21:25

score 2 · Answer 4 · answered Sep 02 '14 at 22:26

2

You need width:auto;

.feature_image img{

    max-height:480px;
    width: auto;
}

http://jsfiddle.net/8qLeE/51/

answered Sep 02 '14 at 22:26

Mihai

26,325
7
66
81

Image expanding larger than parent div

4 Answers4