CSS背景图像，根据视口调整大小[重复]

Posted 2023-03-06

【中文标题】CSS背景图像，根据视口调整大小[重复]

【英文标题】：CSS background image, resize based on viewport [duplicate]

【发布时间】：2017-05-29 14:05:39

【问题描述】：

我正在从现有的引导主题制作单页纸，该主题在部分中具有背景图像，背景大小：封面选择器应用于标题。

目前，在大多数浏览器上，图像仅垂直覆盖大约 80-90% 的屏幕，我已经尝试过。底部填充了白色背景，即以下部分的背景。当您第一次加载页面时，我希望图像占据整个垂直视图。

我可以按像素手动编辑高度，使其适用于给定的监视器/浏览器，但有没有办法让它根据每个浏览器、机器等的视图高度动态调整大小？还是我被这个“空白”问题困住了。

此 PC 上的 chrome 示例： https://i.stack.imgur.com/yqMHp.jpg

【参考方案1】：

给它height:100vh;

html,body
  width:100%;
  height:100%;
  margin:0;
  padding:0:

.imageH
  width:100%;
  margin:0;
  padding:0;
  background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
  background-size:cover;
  background-position:center;
  height:100vh;

<div class="imageH"></div>

如果你在这个 div 之前有一个导航栏，说高度为 50px，那么使用calc(100vh - 50px)

html,body
  width:100%;
  height:100%;
  margin:0;
  padding:0:

.navbar
  width:100%;
  margin:0;
  padding:0;
  background-color:green;
  height:50px;

.imageH
  width:100%;
  margin:0;
  padding:0;
  background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
  background-size:cover;
  background-position:center;
  height:calc(100vh - 50px);

<div class="navbar">navbar comes here</div>
<div class="imageH"></div>

【参考方案2】：

您好，只需提供此代码

  bodybackground: url(images/bg.jpg) no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;

您可以将其视为示例 https://blackrockdigital.github.io/startbootstrap-the-big-picture/

谢谢

【参考方案3】：

这个问题是由于您的背景尺寸造成的。您必须调整背景图像的尺寸。 background-size:cover; 或使用此background-size:100% 100%; 这将填充背景图像中的所有空白区域。