使用content:url()插入的SVG图像如何调整大小？

Question

好的，我所理解的是：使用CSS将多个不同宽高的SVG图像插入到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本身）？

- Dominik Schreiber

Answer 1

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

除此之外，我没有找到一种完全使用CSS使其正常工作的方法。如果你可以访问服务器端编码，你可能可以自动打开SVG文件并提取尺寸。

- David Millar

---

一年半后，background-size:cover解决了这个问题（jsfiddle：http://jsfiddle.net/8t2C9/），而你的方法正是朝着这个方向发展的。谢谢。 - Dominik Schreiber