Safari 中的背景图像未正确拉伸

Question

我正在使用绝对位于某些文本后面的 SVG 背景图像，并尝试为其提供 fluid/variable 纵横比。它在 Chrome、Firefox 等中看起来符合预期，但在 Safari 中，图像大小不正确。 Safari 不会像它应该的那样将背景图像拉伸到其元素的整个宽度。

我尝试使用 object-fit: fill 将 div 替换为带有 img 标签的背景图片，但结果是相同的：在 Safari 中未拉伸，在其他浏览器中正常。

我可以对此进行哪些更改 CSS 以使其在 Safari 中的行为相同？

Answer 1

要解决此问题，我需要将 preserveAspectRatio="none" 添加到图像文件中的 <svg> 元素。 Safari 保留 SVG 图像纵横比的默认行为与其他浏览器的默认行为不同。添加该属性允许我将图像拉伸到不自然的宽高比。