Question

我想在我的页面中显示照片，DIV图层是500 * 500px。我会经常更换图片，图片大小不确定，可能是横版可能是垂直版，也许800 * 600px可能是576 * 720px。

我不想让照片变形。如何设置CSS或JS，使照片只显示中心500 * 500像素，隐藏部分。

Answer 1

在具有预定义尺寸的DIV上使用背景图像，并将图像位置设置为50％，这基本上使其居中。无论溢出500x500将被裁剪......

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

Answer 2

一个很好的技巧是使用透明的PNG而不是div并对其应用背景图像样式。这样你就可以像往常一样使用图像（内联等），但可以随意裁剪。

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

...

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

使用CSS裁剪图像的最佳方法是什么？

2 个答案: