扩展的图像比父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

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

我用它进行了测试，它工作得很好：

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

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

这个解决方案对小图像很好，但是它会导致大图像失真，但也有solutions to overcome it。

Answer 3

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

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

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