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

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;
}