我很抱歉再次提出这个问题,但是我的搜索没有透露任何我能够实现的内容。我在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。对于我缺乏编码经验而道歉。
非常感谢任何帮助。
答案 0 :(得分:1)
这应该是你要找的东西:
<强> FIDDLE 强>
CSS:
.grid_6 {
width: 50%;
height:100px;
overflow:hidden;
}
.thumb img {
display: block;
width:100%;
height:auto;
}
答案 1 :(得分:0)
这是你想要的吗?
.grid_6 {overflow: hidden; }
.thumb img {
height: 100px;
width: auto;
}