如何将图像纵横比保持在 %width div 内？答案

【问题标题】：How to keep image aspect ratio inside a %width div?如何将图像纵横比保持在 %width div 内？
【发布时间】：2014-03-05 00:24:13
【问题描述】：

很抱歉再次问这个问题，但我的搜索没有发现任何我能够实施的东西。我在具有以下样式的 div 中有一个图像：

<div class="thumb grid_6">
    <img src="img/test2.jpg" alt="flavin" />
</div>

.grid_6 { width: 50%; }

.thumb img {
display: block;
max-width:100%;
max-height: 100px;
width:100%;

我希望图像高度锁定在 100 像素，宽度保持在 50%。理想情况下，图像将保持其纵横比，并仅裁剪到所需的大小以适合缩略图。我宁愿不进入 js，除非有更简单的方法来使用 js。对于我缺乏编码经验，我深表歉意。

任何帮助将不胜感激。

【问题讨论】：

图片应该如何保持在 100px 的高度、50% 的宽度并保持其纵横比？
@oGeez 他在问题中说明了这一点。图片应该裁剪。
啊，错过了。谢谢@CeejeeB
像这样：imgur.com/N5xfhRs

标签： html css aspect-ratio

【解决方案1】：

这应该是你要找的：

FIDDLE

CSS：

.grid_6 {
    width: 50%;
    height:100px;
    overflow:hidden;
}
.thumb img {
    display: block;
    width:100%;
    height:auto;
}

【讨论】：

啊！极好的！非常感谢。从来没有想过在 grid_6 类中定义宽度。谢谢您的回答。你也知道我将如何在 div 中居中图像吗？
@user3379832 很高兴我能提供帮助。如果您需要垂直对齐图像，使用 CSS 非常困难，我不知道解决方案，您可以提出一个新问题。

【解决方案2】：

这是你想要的吗？

.grid_6 {overflow: hidden; }
.thumb img {
    height: 100px;
    width: auto;
}

【讨论】：

在这种情况下，图像会缩小到任何宽度，使纵横比保持在 height:100px。我希望图像覆盖容器的整个宽度，即主体的 50%。