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

Posted 2023-03-04

【中文标题】背景图像在 Safari 中未正确拉伸

【英文标题】：Background image not stretched correctly in Safari

【发布时间】：2019-11-25 19:20:17

【问题描述】：

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

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

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

【问题讨论】：

尝试-背景尺寸：封面；

我正在尝试将背景图像拉伸到不自然的纵横比。背景大小的封面保留纵横比。请查看原帖中链接的笔。

【参考方案1】：

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