Question

我有一个包含一些内容的div，并且想要一个背景图像。但是，我希望能够看到图像的整个高度。我可以在内容的顶部和底部添加一些填充，但是我希望这对于所有屏幕尺寸都是动态的。

div{
  background-image:url(https://via.placeholder.com/350x150);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* height 100%; */
  text-align:center;
}

<div> 
Some content
</div>

我知道我也可以在标签上添加标签，但是其中有很多内容都必须浮动以覆盖图像。

任何帮助或建议，将不胜感激。

我不介意使用JS / Jquery解决此问题。

Answer 1

使用vh来使某些东西适合屏幕的整个高度，而不是像宽度那样使用100％的宽度，所以在您的情况下：

height: 100vh;

这将根据用户屏幕尺寸动态地工作，您可以阅读有关此内容的更多信息以及示例here。

CSS-使div适合整个背景图片

1 个答案: