CSS:仅在一个方向上缩放背景SVG

Question

我有一个来自 inkscape 的漂亮背景 SVG 图像，它标志着从一个文本部分到下一个文本部分的过渡。我希望该背景图像放大或缩小到文本部分的整个宽度。出于响应的原因，该大小取决于浏览器的宽度。但是，我希望背景图片的高度固定为 20 像素。

什么不起作用:

1. background-size: cover;这对我不起作用，因为它会在右侧切断图像而不是缩小图像，好吧。
2. 背景大小:包含这对我不起作用，因为它总是会同时在 x 和 y 方向上缩小图像。结果，图像始终保持其原始 x-y 比率，好的。
3. 结合 cover 和 contain出于句法原因，这是不可能的，好吧。
4. 背景大小:100% 20px;或 background-size: auto 20px那是行不通的，即使我期望如此。我用 PNG 试了一下，效果很好。但是对于 SVG，宽度被正确调整，然后高度也被调整，以便图像保留其原始比例，这是我不希望的。但是，我希望使用 SVG，因为它是一个相对简单的图像，我希望它在所有设备(包括真正的大屏幕)上具有最佳分辨率，而不使用巨大的 PNG 图像。
5. 由于问题似乎是特定于 SVG 的，所以我在文本编辑器中打开了 SVG，并将属性和值插入到标签中 preserveAspectRatio="none"。由于它仍然不起作用，我还尝试删除 SVG 标签中的宽度和高度以及 viewBox 规范。没有成功。

Answer 1

所以我试了一下，发现了一个可能性:

1. 在 Inkscape 或文本编辑器中，根据您的图像大小设置以下 viewBox – 因此，如果您的图像是 100*20px，请这样设置:viewBox="0 0 100 20"
2. 在文本编辑器中，将 preserveAspectRatio="none" 添加到 SVG 标签
3. 另外，在 SVG 标签中以百分比设置高度和宽度:width="100%"height="100%"
4. 在 CSS 标记中，只需使用 background-size: 100% 20px;

通过这些步骤，可以使用 CSS 以与缩放任何位图图像相同的方式缩放背景 SVG。