图像扩展大于父div

Question

我有一个包含图像的div。我希望图像使用div调整大小，但我不希望图像的高度大于480px。我将发布下面的内容。它正确调整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/

Answer 4

问题的原因在于，您没有指定容器的width，而是同时为图像设置了width: 100%;。

我用进行了测试，效果很好：

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

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

此解决方案适用于小图像，但是会导致大图像变形，但是有solutions to overcome it。