如何使用CSS/JS在Web上裁剪图像中心

Question

获取了一些尺寸不同的图像，我想制作一些缩略图。如果我使用overflow：隐藏输出图像将是原始图像的左上角，而我希望它是图像的确切中心，因为我希望它是像素。在寻找这一段时间，但没有真正的有用...

Answer 1

而不是使用img，您可以使用div与图像作为背景，并使用CSS background-position属性居中。或者您可以在div和overflow: hidden内使用img，并在图像上使用边距来居中。

但是仅供参考，应该在服务器端生成缩略图，否则无论如何您都要发送整个图像。

Answer 2

那么，你的缩略图只是整个图像的一小部分？为什么不调整服务器中的图像大小并将其显示在图像标签中，并且具有预定义的大小？如果图像不是很大，可以跳过服务器端的大小调整，只需执行以下操作：<img src="image.jpg" alt="Some image" height="42" width="42" />。只需将图像大小更改为任何你喜欢的。