设置了最大宽度/高度时，SVG 图像不会保留其纵横比答案

【问题标题】：SVG image won't preserve its aspect ratio with max width / height set设置了最大宽度/高度时，SVG 图像不会保留其纵横比
【发布时间】：2021-07-13 16:03:53
【问题描述】：

我有一个定义了宽度和高度的 SVG 图像：

<svg width="1280" height="1920"> ... </svg>

我希望它保持其纵横比但是也遵守以下规则，因此它始终适合视口：

max-width: 100vw;
max-height: 100vh;

它适用于基本图像或画布元素，但不适用于 SVG 图像。有任何想法吗？我不想添加额外的标记来实现这一点。

svg {
  max-width: 100vw;
  max-height: 100vh;
  background-color: green;
}

&lt;svg width="1280" height="1920"&gt;&lt;/svg&gt;

PS：SVG 图像可以是任何宽度/高度，所以并不是宽度总是小于高度。也可以反过来。

【问题讨论】：

标签： html css svg

【解决方案1】：

SVG 的行为与位图图像（如 PNG）不同。 <svg> 可以增长到容器的大小，但 SVG 的内容将被缩放以适应该容器。

例子

svg {
  max-width: 100vw;
  max-height: 100vh;
  background-color: green;
}

<svg width="100%" height="100%" viewBox="0 0 1280 1920">
  <rect width="1280" height="1920" fill="red"/>
</svg>

要控制内容的缩放方式，您可以使用preserveAspectRatio 属性。

【讨论】：

【解决方案2】：

不，我认为您不能使用像素来调整 SVG 文件的大小。

【讨论】：

【解决方案3】：

添加

width: auto;
height: auto;

到您的 CSS。这样，当高度受max-height限制时，宽度会自行调整，反之亦然。

【讨论】：