使用background-size时的CSS高度

Question

所以我想使用div调整background-size: contain的背景图片大小，然后将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: ???
}