html css 图像 crop,使用CSS调整图像大小和裁剪尺寸

我最近遇到了同样的问题，最后以一种与背景图像方式稍有不同的方式结束了。另一个主要区别是，我的方式并不假设知道图像的宽度和高度 - 所以它可以动态地与任何图像一起工作。它确实需要一点点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');

}

});

});