背景大小：Safari 中的封面中断但不是 Chrome

Question

我这里有一个临时应用程序。

https://equator1248.herokuapp.com

我已经验证在 Chrome 中一切正常，但在 Safari 中我的背景图片没有显示。

相关代码直接出现：

<html>
  <head>
    <link rel="apple-touch-icon" href="_images/favicon.png">
    <script type="text/javascript" src="arc.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
    <style>
      body{
        background-image: url('_images/background.png');
        background-size: cover;
      }
    </style>
  </body>
</html>

根据：

，属性看起来很简单

https://css-tricks.com/almanac/properties/b/background-size/

如果删除以下行，我可以让 Safari 工作：

background-size: cover;

但是我没有得到想要的封面效果。

我刚刚验证了

background-size: contain;

也打破了它。

像 400px 这样的单个值也会破坏它。它似乎不喜欢你给属性.

的任何值

Answer 1

试试下面的代码 background-size: 100% 100%; 但这可能会在其他浏览器（chrome 等）上扭曲背景图像。

这是解决您问题的绝招，使用服务器端代码找到用户代理，然后在 <head> 部分针对此特定问题编写 css。

Answer 2

我认为这与 background-size:cover 即 totally supported on Safari 无关，更多的是因为您的网络服务器发送的图像有误 content-type .所有图像在我的控制台中都显示为 txt，而在其他网站上不会出现这种情况。

资料来源：我（可能）与您有相同的设置。 Macbook Air、Safari、macOS High Sierra 10.13.6.

Answer 3

我遇到了同样的问题。在不断尝试让它在双方都起作用之后，我想到了使用 calc() 属性.

方法如下：您只需使用 devTool 检查图像尺寸，从 chrome 浏览器中获取图像尺寸，或者如果您设置了图像的宽度和高度，则只需执行以下操作：

你先给身高:;, 然后最后你用 calc() 属性 width: calc(675px + (730.16 - 675) * (100vw - 1200px) / (1365 - 1200));

这两个675px是它要计算的起始宽度 730.5px 是结束宽度，或最后一个宽度。

这两个 1200px 是我希望图像缩放的屏幕起始宽度。 1365 是我希望图像缩放的完成或最后宽度。

所以它几乎就像@media (min-width: 1200px) and (max-width: 1365px) {}。还要确保你只使用一个单元，就像我在这里所做的那样。

我只是建议在这里使用 px 来处理 calc() 。如果您确实以 % 或其他单位设置单位，则只需检查该维度并在 calc() 中检查它即可。

背景大小：Safari 中的封面中断但不是 Chrome

background-size: cover breaks in Safari but not Chrome

html

css

safari

google-chrome

background-image