很抱歉再次询问这个问题,但我的搜索没有显示任何我能够实现的内容。我在 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 来做到这一点。对于我缺乏编码经验,我深表歉意。
任何帮助将非常感激。
这应该是您正在寻找的:
FIDDLE http://jsfiddle.net/chadocat/WxhjQ/4/
CSS:
.grid_6 {
width: 50%;
height:100px;
overflow:hidden;
}
.thumb img {
display: block;
width:100%;
height:auto;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)