用CSS裁剪圖片的最佳方式是什麼？

Question

我想在我的頁面中顯示一張照片，DIV圖層爲500 * 500px。我會經常更換圖片，圖片尺寸不確定，可能是橫版，可能是垂直版，也許800 * 600px或者576 * 720px。

我不想讓照片變形。如何設置CSS或JS，使照片只顯示中心500 * 500像素，隱藏左右部分。

Answer 1

在具有預定義尺寸的DIV上使用背景圖像，並將圖像位置設置爲基本居中的50％。無論溢出的500×500將被裁剪...

#yourImageDiv { 
    background: url(../img/image.jpg) no-repeat 50%; 
    height: 500px; 
    width: 500px; 
} 

Answer 2

一個不錯的技巧是使用一個透明的PNG，而不是一個div並應用background-image樣式給它。這樣，您可以像平常一樣使用圖像（內聯等），但可以隨意裁剪。

#cropper { 
    width: 500px; 
    height: 500px; 
    background-image: url(myBackgroundImage.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

...

<img id="cropper" src="clear.png">