纯 CSS/JQuery 解决方案，在设置大小的 div 框中居中/裁剪不同大小的图像

Question

我正在一个社区网站上工作，其缩略图大小略有不同。

我有一个设置为 165x165 像素的 div 框。

一些全尺寸缩略图图像最终为 165 像素，其他为 180、192、205 等。

我想要做的是始终强制它们在 div 框内水平居中显示，宽度不超过 165 像素。因此，如果图像水平为 185 像素，它将向左裁剪 10 个像素，向右裁剪 10 个像素。水平 205 像素的图像将在每侧裁剪 20 像素。

不幸的是，我无法访问服务器端代码，因此必须全部通过 javascript 和/或 jquery 来完成。

我看到的最大挑战是图像尺寸总是在变化。

Answer 1

您应该能够将overflow:hidden 放在<div> 上，让浏览器处理剪辑。像这样的：

<div style="width: 165px; height: 165px; overflow: hidden;">
    <img ...>
</div>

现场示例：http://jsfiddle.net/ambiguous/M3FzZ/

如果你需要在 jQuery 中这样做，那么：

$('div-selector').css('overflow', 'hidden');

“div-selector”是获取<div>s 所需的任何选择器。