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

Question

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

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

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

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

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

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

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

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

Answer 1

1. 您需要使用 viewBox - 作为建议的已删除答案。
2. 因为您在 background-color: green 上使用了 <svg>，所以您被误导了正在发生的事情。

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 属性。

Answer 2

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

参考这篇文章：https://css-tricks.com/scale-svg/

Answer 3

添加

width: auto;
height: auto;

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