CODEWITHSUNDEEP
htmlcss
user3167249
user3167249

Reputation: 1102

Image expanding larger than parent div

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>

Upvotes: 22

Views: 77179

Answers (4)

Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22804

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.

Upvotes: 6

Mihai
Mihai

Reputation: 26804

You need width:auto;

.feature_image img{

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

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

Upvotes: 3

Johnny
Johnny

Reputation: 479

Have you tried putting a display:block?

Full CSS would look like:

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

Upvotes: 19

Cowwando
Cowwando

Reputation: 460

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%;
}

Upvotes: 5

Related Questions