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>

Answer 1

Have you tried putting a display:block?

Full CSS would look like:

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

Answer 2

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.