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; }
https://i.stack.imgur.com/7fIsb.png
img { width: 3em; }
https://i.stack.imgur.com/7iw0h.png
img { width: 4em; }
https://i.stack.imgur.com/Pbceu.png
但是，如果我使用 CSS height 属性：
img { height: 2em; }
https://i.stack.imgur.com/n10yp.png
img { height: 3em; }
https://i.stack.imgur.com/B25nT.png
img { height: 4em; }
https://i.stack.imgur.com/xcH8V.png
我得到了我需要的行为，但我不确定这是正确的方法。为什么会这样？您知道调整 SVG 图像大小的更好方法（尤其是使用 Flexible Box Module）吗？
SVG 与位图图像（例如 PNG 等）不同。如果 SVG 具有 viewBox（如您所见），那么它将被缩放以适应其定义的视口。它不会像 PNG 那样直接缩放。
因此，如果高度受到限制，增加 img 的 width 不会使图标变得更高。您最终会得到 img 水平居中在一个更宽的框中。
我相信您的问题是您的 SVG 在其中定义了固定高度。打开 SVG 文件并确保它们：
没有定义宽度和高度，或者宽度和高度都设置为“100%”。
那应该可以解决您的问题。如果没有，请将您的 SVG 之一发布到您的问题中，以便我们了解它是如何定义的。
transform CSS 属性允许您旋转、缩放、倾斜或平移元素。
因此，您可以轻松地使用 transform: scale(2.5); 选项来缩放 2.5 倍。
我必须自己弄清楚，但是您需要一些 svg 来匹配 viewBox 和宽度 + 高度。
例如，如果它已经有 width="x" height="y" 那么 =>
添加<svg ... viewBox="0 0 [width] [height]">
和相反。
之后它将随 <svg ... style="width: xxx; height: yyy;"> 缩放
如果 svg 文件在 svg 文件中已经定义了高度和宽度 width="100" height="100" 然后添加这个 width="100" height="100" viewBox="0 0 100 100" 同时保持已经定义宽度=“100”高度=“100”。然后，您可以通过在您的案例 img 中使用选择器来缩放 css 文件中的 svg，这样您就可以这样做： img{height: 20px; width: 20px;} 并且图像会缩放。
使用任何文本编辑器打开 SVG 并从根节点中删除 width 和 height 属性。
前
<svg width="12px" height="20px" viewBox="0 0 12 20" ...
后
<svg viewBox="0 0 12 20" ...
现在，图像将始终填满所有可用空间，并将使用 CSS width 和 height 进行缩放。它不会伸展，所以它只会增长到可用空间。
您必须修改 viewBox 属性以使用 svg 正确更改高度和宽度。它位于 svg 的 <svg> 标记中。
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox
如果不是太大问题，那么您可以通过图像 HTML 标记导入，然后轻松调整其大小，同时让父元素知道它们已调整大小，然后您可以通过在图像标签。这将解决您的目的，但您不能放大太多，因为这会使它变得模糊。
您也可以使用 transform: scale("") 选项。
关注公众号
不定期副业成功案例分享
width和height，我想我可以毫无问题地对其进行缩放。width。height来自 SVG。