图像扩展大于父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

你试过放一个display:block吗？

完整的 CSS 看起来像：

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

Answer 2

您不仅需要指定 max-height；还有高度，以便对图像使用 100% 高度！:) CSS 不知道 100% 继承什么。我希望你能明白。

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

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

Answer 3

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

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

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

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

此解决方案适用于小图像，但会导致大图像失真，但有解决方案可以克服它。