Html 在chrome浏览器中将svg图像调整为背景大小

我使用svg图像作为背景，通过背景大小拉伸svg图像。我希望它只在宽度方向上伸展。它在firefox、IE9+和chrome中工作得非常好。请告诉我如何才能做到这一点

.homecallouts ul li {
background-image: url('blue_arow_callout.svg');
background-size: 100% 100%;
width: 21%;
height: 42px;

请参阅jsbin代码

---

当我在firefox中调整大小时，只有宽度拉伸，但在chrome中，宽度和高度都在拉伸。我只想让宽度拉伸。

我认为chrome在这一点上技术上是正确的，您需要根据实际需要调整背景大小值。将它们保持在100%会迫使纵横比保持不变。

在SVG文件中添加preserveAspectRatio=“none”打开标记可能会有所帮助

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="282.05px" height="61.974px" viewBox="286.287 26.514 282.05 61.974" enable-background="new 286.287 26.514 282.05 61.974"
     xml:space="preserve" preserveAspectRatio="none">
<polygon fill="#0063AF" points="538.337,26.514 286.287,26.514 316.287,57.5 286.287,88.488 538.337,88.488 568.337,57.5 "/>
</svg>

---

不要使用背景大小。您需要做的是在SVG文件中为width、height和preserveSpectratio设置以下值

<svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="..." />

---

请注意，为了使其正常工作，您的SVG还需要一个有效的viewBox。它看起来确实如此。

这是一个Chrome bug。事实上，是回归

---

我没有足够的声誉去投票或发表评论，所以只有再次回答才能奏效。我通过添加preserveAspectRatio=“none”解决了类似的问题

如果您的答案中包含代码，使其符合OP的要求，那将非常有用。我已经指定了42px的高度，背景尺寸高度也为100%，所以为什么高度会拉伸。哦，另一方面，firefox正按照我的要求运行。不过，在五月的情况下，设置

preserveSpectratio=“none”

确实有帮助。Ilya Streltsyn我爱你……说真的，你可能刚刚救了我的命，非常感谢！！！可能重复的

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="591.42859"
height="250.24918"
id="svg2"
version="1.1"
preserveAspectRatio="none"
inkscape:version="0.48.2 r9819"
sodipodi:docname="background.svg">