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

很抱歉再次问这个问题，但我的搜索没有显示我能够实现的任何内容。我在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%;

.grid_6{宽度：50%；}
.拇指img{
显示：块；
最大宽度：100%；
最大高度：100px；
宽度：100%；

我希望图像高度锁定在100px，宽度保持在50%。理想情况下，图像将保持其纵横比，并裁剪到所需大小以适应缩略图。我不想进入js，除非有更简单的方法使用js。我为自己缺乏编码经验道歉

任何帮助都将不胜感激。

这就是你想要的吗

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

---

这应该是您正在寻找的：

CSS:

---

图像应该如何保持在100px的高度，50%的宽度，并保持其纵横比？@oGeez他在问题中指出。图像应该裁剪。啊，错过了。谢谢@CeejeeBLike这样：在这种情况下，图像缩小到任何宽度，保持高宽比：100px。我希望图像覆盖整个contai的宽度ner，这是身体的50%。啊！太棒了！非常感谢。从未想过在grid_6类中定义宽度。谢谢你的回答。你还知道我将如何在div中居中图像吗？@user3379832很高兴我能提供帮助。如果你需要垂直对齐图像，使用CSS非常困难，我不知道为什么卢顿，你可以问一个新问题。

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