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

Question

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

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

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

Answer 1

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