html - 如何使用 CSS 居中和裁剪图像以始终显示为方形？

Question

我需要始终仅使用 CSS 将随机大小的图像裁剪为 160x160 的正方形。 图片在裁剪时应保持居中。

我的标记应该是:

<a href="#" class="cropper">
   <img src="image" alt="description" />
</a>

在 StackOverflow 上搜索我找到了一些答案(例如 CSS - How to crop an image to a square, if it's already square then resize it )，但它们不适用于您的图像水平(宽)或垂直(高)更大的情况.

具体来说，我需要能够像这样呈现宽幅图像:

还有像这样的高大图片:

正方形，事先不知道哪个是水平矩形或垂直矩形。它还应该支持已经平方的图像。

Answer 1

jsFiddle Demo

div {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<div>
    <img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>

---

关于尺寸的说明

作为Salman A评论中提到，我们需要设置 img 的位置坐标(上、左、下、右)，以使用高于图像实际尺寸的百分比。我在上面的例子中使用了1000%，当然你可以根据自己的需要进行调整。

* 进一步说明:当我们设置img的left和right(或者:top和底部)坐标为-100%(包含div)，整体允许的宽度(或: img 的高度)，最多可以是包含div的宽度的300% (或:高度)，因为它是 div 的宽度(或:高度)和 左和右(或:上和下)坐标。