如何使方形裁剪图像响应

Question

我正在尝试裁剪一组尺寸略有不同的图像，使其成为匹配尺寸的正方形，并使它们具有响应性。我发现可以通过将图像放入div中然后使图像成为背景图像来裁剪图像，但是当我尝试使用height：auto来获取响应图像时，div会崩溃。 / p>

这是我能找到的最接近我的问题的东西： How to make centre cropped image responsive?

但是如果图像处于纵向方向，则此解决方案只能获得正方形裁剪。另外，我必须根据它的大小手工裁剪每个图像。

我想我正在寻找的是一个CSS黑客，它可以将我的所有图像裁剪成相同大小的正方形，然后相应地缩放它们。这是CSS的一厢情愿吗？

Answer 1

你尝试过背景尺寸：封面吗？它将背景图像调整为容器的大小..

    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;