不顯示在ios上的背景圖像

Question

我在ios中發生了一個奇怪的錯誤。 我使用flexbox和背景圖像顯示一些用戶標籤。

問題是，圖像不顯示在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上，窗戶完全顯示等

有什麼想法？

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

Answer 2

我還要補充一點，figure元素僅僅是一個容器元素和通常包含一個img和figcaption。它不應該取代img或拍攝背景圖片。在你的情況下，div將是最好的選擇。

查看MDN頁面以獲取最佳示例。