CSS - 使 div 适合整个背景图像 [重复]答案

【问题标题】：CSS - making a div fit the full background image [duplicate]CSS - 使 div 适合整个背景图像 [重复]
【发布时间】：2019-09-01 17:16:31
【问题描述】：

我有一个包含一些内容的 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>

我知道我也可以在<div> 中添加一个<img> 标记，但其中有很多内容必须浮动以覆盖图像。

我不介意使用 JS/jQuery 来解决这个问题。

【问题讨论】：

我知道这有点倒退，通常人们要求让 bg 图像适合 div 而不是 div 适合 bg 图像
试试background-size:100% 100%
@ZohirSalak 感谢您的评论。这不会像我想要的那样扩展 div，而是缩小图像的高度，使其变形
您需要将height 设置为div 或min-height。
$("#myDiv").css("min-height", ((doc_width/16)*9)+'px');对于宽高比 (16:9) 的图像

标签： html css

【解决方案1】：

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

height: 100vh;

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

【讨论】：