为什么 SVG 图像不使用 CSS“宽度”属性进行缩放？

Question

HTML

 <div id="hero">
   <div id="social">
      <img src="facebook.svg" alt="Facebook">
      <img src="linkedin.svg" alt="LinkedIn">
      <img src="instagram.svg" alt="Instagram">
    </div>
</div>

使用 SASS 的 CSS

 #hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;

    #social {
        width: 50%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        img {
            width: 2em;
        }
    }
}

我无法使用 CSS width 属性调整 SVG 的大小。这是我通过不同方法获得的结果（注意图标如何向 hero div 的中间折叠）：

img { width: 2em; }

img { width: 3em; }

img { width: 4em; }

但是，如果我使用 CSS height 属性：

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

我得到了我需要的行为，但我不确定这是正确的方法。为什么会这样？您知道调整 SVG 图像大小的更好方法（尤其是使用 灵活框模块）吗？

原文由 Pine Code 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

SVG 不同于 PNG 等位图图像。如果 SVG 有 viewBox - 正如你的那样 - 那么它将被缩放以适合它定义的视口。它不会像 PNG 那样直接缩放。

因此，如果高度受到限制，增加 width 的 img 不会使图标更高。您最终会得到 img 在一个更宽的盒子中水平居中。

我相信您的问题是您的 SVG 中定义了固定高度。打开 SVG 文件并确保它们：

1. 没有 width 和 height 定义，或者
2. 将 width 和 height 都设置为 "100%" 。

那应该可以解决您的问题。如果没有，请将您的 SVG 之一发布到您的问题中，以便我们了解它是如何定义的。

原文由 Paul LeBeau 发布，翻译遵循 CC BY-SA 3.0 许可协议