不显示在ios上的背景图像

问题描述：

我在ios中发生了一个奇怪的错误。我使用flexbox和背景图像显示一些用户标签。不显示在ios上的背景图像

问题是，图像不显示在iPhone/ios中。无论是在铬或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上，窗户完全显示等

有什么想法？

答

添加

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

工程就像一个魅力，谢谢 –

答

我还要补充一点，figure元素仅仅是一个容器元素和通常包含一个img和figcaption。它不应该取代img或拍摄背景图片。在你的情况下，div将是最好的选择。

查看MDN页面以获取最佳示例。

不显示在ios上的背景图像

相关推荐