使图像完全响应但保持纵横比答案

【问题标题】：Make image fully responsive but maintain aspect ratio使图像完全响应但保持纵横比
【发布时间】：2022-02-05 05:46:15
【问题描述】：

我有一个问题，我有完全响应的 webshop 可以调整大小，我需要将产品框图像制作成方形框。因此，例如图像 150x150、150x100 和 100x150 需要以 X/Y 轴为中心，没有光栅化和类似问题。我没有硬编码产品框大小的选项，因此它必须响应浏览器宽度的变化。

到目前为止我尝试过：

在后面使用 150x150 隐藏占位符来保持纵横比，并在将包含图像标签的添加元素上（尝试宽度/高度自动和 100%）
在后面使用 150x150 隐藏占位符来保持纵横比，并在该添加元素上添加元素，该元素将包含具有包含/覆盖属性的背景图像的元素，对我不起作用
编写可处理 img 加载并创建画布以替换旧图像的脚本 - 由于延迟加载而无法工作

所以我的限制是：

由于延迟加载图像而无法使用脚本
无法硬编码产品框中图像框的大小
不能使用所有浏览器不支持的东西（例如max-width: max-content IE11及以下不支持）
我需要使用提供 size 属性的 img 标签来获得不同尺寸所需的所有尺寸

提前谢谢大家

【问题讨论】：

Google 并了解“object-fit”css 属性
不幸的是，object-fit 在 IE 中不起作用。但是背景大小的封面和包含可能会对您有所帮助。 “所有浏览器”可能是一个不可能的目标，但 caniuse.com 会告诉您哪些浏览器版本支持哪些 CSS。
@AHaworth 我尝试使用背景大小，但这里发生的情况是我得到的图像比它应该的小，所以它被光栅化了，这就是为什么我需要使用标签将包含 size 属性并根据浏览器的宽度加载图像，如果我得到较小的图像，我没有选项加载更大的图像
感谢您的澄清。因此，如果图像小于可用区域，您希望它坚持以自然尺寸显示，如果它更大，则压缩到可用区域。
“所有浏览器都支持”不是一个可以实现（甚至是理智）的目标。 IE 开发在七年前结束。 A Business Case for Dropping Internet Explorer

标签： html css sass responsive responsive-images

【解决方案1】：

这是一个简单的 sn-p，其中图像被赋予最大宽度和高度。它不会超过它的自然宽度和高度，但如果它对于允许的区域来说太大了，它会缩小以适应而不会失去其纵横比。

图像使用 flex 在其父级居中。

div {
  width: 20vw;
  height: 20vw;
  border: solid 1px black;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
  max-height: 100%;
}

&lt;div&gt;&lt;img src="https://picsum.photos/id/1015/150/200"&gt;&lt;/div&gt;

【讨论】：