Question

我从一个现有的bootstrap主题制作一个单页分页器，该主题在截面中有背景图像，背景大小：封面选择器应用于标题。

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

我可以手动编辑逐个像素的高度，使其适用于给定的监视器/浏览器，但有没有办法让它根据每个浏览器，机器等的视图高度动态调整大小？或者我坚持这个＆＃34;白色空间＆＃34;问题。

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

Answer 1

给它height:100vh;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

嗨，只需提供此代码

  body{background: 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/

感谢

Answer 3

由于您的背景尺寸而出现此问题。您必须调整背景图片大小。 background-size:cover;或使用此background-size:100% 100%; 这将填充botoom背景图片中的所有空白区域。

CSS背景图片，根据视口调整大小

3 个答案: