我正在建立一个投资组合网站。

HTML代码

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

CSS代码（使用SASS）

#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的大小。这是我在不同情况下获得的信息：

img { width: 2em; }

img { width: 3em; }

img { width: em; }

请注意图标如何向herodiv 的中间折叠。

相反，如果我使用CSS height属性：

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

我需要这种行为，但是我不确定这是正确的方法。为什么会这样？您是否知道调整SVG图像大小的更好方法（尤其是使用flexbox模型）？