Расширение изображения больше, чем у родителя div

Question

У меня есть div, содержащий изображение. Я хочу, чтобы изображение изменялось с помощью div, но я не хочу, чтобы изображение всегда имело высоту более 480 пикселей. Я опубликую то, что у меня есть. Он правильно изменяет размер div, но он не подчиняется максимальной высоте. Если я буду перемещать высоту mx в img css, это не изменится. Я уверен, что это что-то простое, но я не могу понять.

.feature_image {  
    max-height:480px 
} 

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

А вот HTML

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

Answer 1

Вы должны указать не только макс-высоту; но и высоту, чтобы использовать высоту 100% для изображения! :) CSS не имеет представления о том, что 100% унаследовать. Надеюсь, вы поняли это.

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

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

Answer 2

Вы пробовали поставить display:block?

Полный CSS будет выглядеть следующим образом:

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

Answer 3

Вам нужно ширина: авто;

.feature_image img{ 

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

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