图像扩展大于父 div答案

【问题标题】：Image expanding larger than parent div图像扩展大于父 div
【发布时间】：2018-08-29 21:41:22
【问题描述】：

我有一个包含图像的 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>

【问题讨论】：

标签： html css

【解决方案1】：

您是否尝试过发送display:block？

完整的 CSS 如下所示：

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

【讨论】：

【解决方案2】：

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

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

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

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

这个方案对小图很好，但是会导致大图失真，不过有solutions to overcome it。

【讨论】：

【解决方案3】：

您不仅需要指定最大高度；还要高度，以便将高度 100% 用于图像！ :) CSS 不知道要继承什么 100%。我希望你能明白。

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

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

【讨论】：

这会扭曲图像，因为 with 没有按比例调整大小
您需要选择图像的纵向或横向比例！所以基本上你可以将高度/宽度设置为某个值，并根据它们的比例自动调整图像的宽度/高度。除了通过将它们放在带有溢出的div容器中来“裁剪”它们之外没有其他选择：隐藏:)

【解决方案4】：

你需要 width:auto;

.feature_image img{

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

【讨论】：