CSS中最好的裁剪图像的方法是什么？

Question

我想在我的页面中展示一张照片，DIV层的大小为500 * 500像素。我会经常更换图片，图片的大小不确定，可能是横向版本，也可能是纵向版本，可能是800*600像素，也可能是576*720像素。

我不希望照片变形。如何设置CSS或JS，使照片仅显示中心的500 * 500像素，隐藏周围的部分。

- Mostafa Elkady

Answer 1

元素上使用背景图片，并设置图片位置为50%，这样可以将其居中。超出500x500尺寸的部分将被裁剪...

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

- Josh Stodola

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">

- Robusto

---

非常好！这也可以有一个“alt”标签。 - Pekka