如何自动裁剪和居中图像

Question

给定任意图像，我想从图像中心裁剪一个正方形并将其显示在给定的正方形内。这个问题与此类似：CSS显示已调整大小并裁剪的图像，但是我不知道图像的大小，因此无法使用设置的边距。

Answer 1

我一直在寻找使用img标签的纯CSS解决方案（而不是背景图片）。

我发现这种出色的方法可以通过CSS实现裁剪缩略图的目标：

.thumbnail {

  position: relative;

  width: 200px;

  height: 200px;

  overflow: hidden;

}

.thumbnail img {

  position: absolute;

  left: 50%;

  top: 50%;

  height: 100%;

  width: auto;

  -webkit-transform: translate(-50%,-50%);

      -ms-transform: translate(-50%,-50%);

          transform: translate(-50%,-50%);

}

.thumbnail img.portrait {

  width: 100%;

  height: auto;

}

它类似于@Nathan Redblur的答案，但它也允许纵向图像。

对我来说就像一个魅力。关于图像，您唯一需要知道的是它是纵向还是横向，以便设置.portrait类，因此我不得不在这部分使用一些Javascript。