如何自动裁剪和居中图像

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。