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

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;
        }
    }
}

问题是我无法使用CSSwidth属性来调整SVG的大小。这是我在不同情况下获得的信息：

img { width: 2em; }

img { width: 3em; }

img { width: em; }

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

相反，如果我使用CSSheight属性：

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

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

SVG与位图图像（例如PNG等）不同。如果SVG具有viewBox-如您所愿-将对其进行缩放以适合其定义的视口。它不会像PNG那样直接缩放。

因此，增加width的img不会使任何的图标，如果更高的高度受到限制。您将最终将img水平居中放置在一个较宽的框中。

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

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

那应该解决您的问题。如果不是，请将您的SVG之一发布到您的问题中，以便我们查看其定义。

我必须自己弄清楚，但是需要一些svg来匹配viewBox和width + height。

例如，如果已经有，width="x" height="y"则=>

加 <svg ... viewBox="0 0 [width] [height]">

相反。

之后它将与 <svg ... style="width: xxx; height: yyy;">

1. 如果svg文件具有已width="100" height="100"在svg文件中定义的高度和宽度，则x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100"在保留已定义的高度的情况下添加它width="100" height="100"。
2. 然后，您可以根据情况使用选择器来缩放css文件中的svg，img然后可以执行此操作：img{height: 20px; width: 20px;}图像将缩放。

该转换CSS属性可以旋转，缩放，倾斜或翻译的元素。

因此，您可以轻松地使用该transform: scale(2.5);选项来缩放2.5倍。

您必须修改viewBox属性以使用svg正确更改高度和宽度。它在<svg>svg的标签中。

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox

您也可以使用该transform: scale("")选项。