SVG避免空白

Question

我正在尝试将SVG图像添加到Wordpress并应用固定高度，允许宽度灵活。

当我通过CSS定义固定高度时，宽度保持100％但图形不填充空间。它导致任何一方的空间过剩，这是一个问题。

HTML标记：

<img src="example.svg" alt="example" />

CSS：

img {
    height: 50px;
    width: auto;
}

是否可以避免这个额外的空间，以便我可以保持图像与内容保持一致。

Answer 1

使用example.svg中的preserveAspectRatio = "none"属性并相应地设置viewBox属性。