调整插入内容的svg图像：url（）

Question

好的，我得到的是以下内容：多个svg图像具有不同的宽度/高度，通过css插入到html中。我想将它们全部缩放到相同的宽度但不起作用（至少在Safari，Chrome和Firefox中没有）。

HTML：

<h4 class="before" id="foo">Foo</h4>
<h4 class="before" id="bar">Bar</h4>
<h4 class="before" id="foobar">Foobar</h4>

的CSS：

.before:before { width: 20px; }
#foo:before { content:url('foo.svg'); }
#bar:before { content:url('bar.svg'); }
#foobar: before { content:url('foobar.svg'); }

我怎样才能调整这些svg图像的大小，使它们每个显示宽度为20px（但不要更改svg本身）？

Answer 1

如果您知道高度是多少，您可以将图像设置为伪元素的背景并声明background-size: 20px auto;，但您需要知道高度的确切大小或更大伪元素本身。

除此之外，我无法找到让它完全在CSS中运行的方法。如果您可以访问服务器端编码，则可以打开SVG文件并自动删除大小。