使用背景尺寸時的CSS高度

Question

所以我想使用background-size: contain調整div的背景圖像大小，並將width設置爲100％。我需要這個移動網站，其中屏幕的尺寸是可變的。但是，在設置高度時，我有兩難處境。

如果我以像素爲單位設置高度，當圖片變小時，會在圖片下面留下空白區域。

如果我沒有設置高度，圖片將不會出現。

這是最好的解決方案是什麼？

這裏是我的代碼：

<div id="container"> 
    <p>Some text</p> 
    <div id="my-picture"></div> 
</div> 

CSS：

#container { 
    width: 100%; 
} 
#my-picture { 
    background:url(somepic.jpg) no-repeat; 
    background-size: contain; 
    height: ??? 
} 

Answer 1

根據W3Schools你應該使用背景大小：蓋;

#my-picture { 
    background:url(somepic.jpg) no-repeat; 
    background-size: cover; 
    height: ??? 
}