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

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

---

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

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

#yourImageDiv{
背景：url（../img/image.jpg）不重复50%；
高度：500px；
宽度：500px；
}

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

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

---

非常好！这也可以有一个

alt

标记。

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