如何使方形裁剪的图像具有响应性答案

【问题标题】：how to make square cropped images responsive如何使方形裁剪的图像具有响应性
【发布时间】：2016-09-19 02:24:06
【问题描述】：

我正在尝试将一组大小略有不同的图像裁剪为大小匹配的正方形，并使其具有响应性。我发现可以通过将图像放在 div 中然后将图像设置为背景图像来裁剪我的图像，但是当我尝试使用 height: auto 来获取响应式图像时，div 会崩溃。

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

但是，如果图像一开始是纵向的，则此解决方案只能得到方形裁剪。此外，我必须根据图片的大小手动裁剪每张图片。

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

【问题讨论】：

你试过 max-width 属性了吗？
是的。我已经设置了 max-width: 100%
我昨天在做一个项目，并添加了这个代码来让我的图像响应（我在项目中加入了引导程序）所以你可以试试我的代码，看看它是否也适合你.. .about-image .class-name img { 显示：块；宽度：100%；高度：28em； }

【解决方案1】：

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

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

【讨论】：