在适合没有容器或空白的尺寸时保持图像纵横比

Question

是否可以在不使用固定容器的情况下使任意尺寸的图像适合给定的宽度和高度？

显然，创建一个特定尺寸的容器并在其中放置一个 img 很容易，但是这可能会导致容器内沿图像的纵横比比容器短或高的维度出现额外的空白。

是否可以告诉图片：

• 应该尽可能大
• 保持其纵横比
• 永远不要超过宽度
• 永远不要超过 b 的高度
• 不包含空格

需要明确的是，这需要只涉及 CSS，并且在运行时不需要了解图像的尺寸。

Answer 1

img{
  object-fit: cover;
}

你可以查看更多关于 object-fit here

Answer 2

您可以使用 CSS 属性 object-fit: cover; 实现此目的。

这将告诉图像保持其纵横比，永远不要超过容器的宽度和高度并且没有空白，但是为了保持纵横比并且仍然适合没有空白的容器，它将切断边图像。