html - 背景图像不显示在 ios 上

Question

我在 ios 中遇到了一个奇怪的错误。我使用 flexbox 和 background-image 显示一些用户标签。

问题是，图像没有在 iPhone/ios 中显示。无论是在 chrome 还是 safari 中。

这是我的代码:

<div class="user-container">
  <figure class="user-picture" style="background-image: url(resources/images/user.jpg)"></figure>
  <div class="user-details">
    ...
  </div>
</div>

还有我的CSS:

.user-container {
   display: flex;
   width: 40%;
   margin: 0 2% 2em;
   min-height: 10em;
}
.user-picture{
  width: 40%;
  height: 100%; 
  min-height: 10em;
  background-position: top center;
  background-size: cover;
}

最奇怪的是，在同一个页面中，我有一个具有完全相同代码的模态弹出窗口，它正在显示图像。

图片在安卓、windows等设备上完美显示

有什么想法吗？

Answer 1

添加

-webkit-background-size: cover; 在.user-picture

试试吧

就是这样

.user-picture{
  width: 40%;
  height: 100%; 
  min-height: 10em;
  background-position: top center;
  background-size: cover;
  -webkit-background-size: cover;
}