css - 使用背景尺寸时的 CSS 高度

Question

所以我想调整divusing的背景图像的大小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你应该使用Background-size: cover;

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