我最近遇到了同样的问题,最后以一种与背景图像方式稍有不同的方式结束了。另一个主要区别是,我的方式并不假设知道图像的宽度和高度 - 所以它可以动态地与任何图像一起工作。它确实需要一点点jQuery来确定图像的方向(我相信你可以使用普通的JS来代替)。
我写了一个blog post about it如果你有兴趣了解更多的解释,但该代码非常简单:
HTML:
CSS:
li {
width: 150px; // Or whatever you want.
height: 150px; // Or whatever you want.
overflow: hidden;
margin: 10px;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}
的jQuery:
$(document).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});