在Safari中无法正确拉伸背景图片

Question

在this pen中查看我的代码。

我正在使用绝对位于某些文本后面的背景图像。在Chrome，Firefox等中，它看起来像预期的那样，但是在Safari中，图像大小不正确。 Safari不会像应有的那样将背景图像拉伸到其元素的整个宽度。

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

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

Answer 1

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