时间戳

首页 > 解决方案 > 设置了最大宽度/高度时，SVG 图像不会保留其纵横比

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

问题描述

我有一个定义了宽度和高度的 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图像可以是任意宽度/高度，所以并不是宽度总是小于高度。也可以反过来。

标签： htmlcsssvg

解决方案

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

推荐阅读