html - 如何在 %width div 中保持图像纵横比？

Question

很抱歉再次提出这个问题，但我的搜索没有显示任何我能够实现的东西。我在 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 来完成它。对于我缺乏编码经验，我深表歉意。

任何帮助将不胜感激。

Answer 1

这应该是您正在寻找的:

FIDDLE

CSS:

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