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>

如果你需要在jQuery中执行此操作，那么：

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

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