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%;

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

非常感谢任何帮助。

Answer 1

这应该是你要找的东西：

<强> FIDDLE

CSS：

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

Answer 2

这是你想要的吗？

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

如何将图像宽高比保持在％宽度div内？

2 个答案: