调整插入内容的 svg 图像大小：url()答案

【问题标题】：resize svg image inserted with content:url()调整插入内容的 svg 图像大小：url()
【发布时间】：2013-04-15 23:56:47
【问题描述】：

好的，我得到的是以下内容：通过 css 插入到 html 中的多个具有不同宽度/高度的 svg 图像。我想将它们全部缩放到相同的宽度，但这不起作用（至少在 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 本身）？

【问题讨论】：

标签： html css svg

【解决方案1】：

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

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

【讨论】：

1 1/2 年后，background-size:cover 解决了问题（jsfiddle：jsfiddle.net/8t2C9），您的方法正是朝着这个方向发展。谢谢。