如何使用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" />。只需將圖像大小更改爲任何你喜歡的。