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;
}

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

图像在android，windows等上完美显示。

有什么想法吗？

Answer 1

添加

.user-picture

中的

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

并尝试它应该工作

所以它将是

{{1}}

Answer 2

我还要补充一点，figure元素只是一个容器元素，通常包含img和figcaption。它不应该替换img或拍摄背景图像。在您的情况下，div将是最佳选择。

查看MDN页面以获取良好示例。

背景图像不显示在ios上

2 个答案: