Question

我想在bootstrap-grid中创建全屏背景图像，以便它能够响应。

我创建了一行并将其设置为100％高度，以便它可以适合整个屏幕。

添加了1024 * 768px分辨率的图像，它完美地出现在背景中，但带有滚动条。

我只是想摆脱滚动条，使其适合屏幕。这是我的HTML

html,body,.container-fluid{     
    height:100%;        
}

.row{
    height:100%;
}
 img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 100vh;
 }

<div class="container-fluid">
    <div class="row" >
    <img src="retail.jpg">
        <div class="col-md-12"> 
        </div>
    </div>
</div>

有人可以帮助我吗？

Answer 1

这是件事。图片全屏，内容在底部。

如果删除内容，则不会显示滚动条。

Bootply ：http://www.bootply.com/sFNwejI4ow

<强> CSS ：

html,body,.container-fluid{
    height:100%;
}

.full{
    height:100%;
}
 img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
 }

<强> HTML ：

<div class="container-fluid">
    <div class="row full">
        <img src="//placehold.it/640x480">
    </div>
    <div class="row">
        <div class="col-md-12">
        Custom content
      </div>
    </div>  
</div>

Answer 2

默认情况下，应删除水平和垂直滚动条：

<style type="text/css">
body {
    overflow:hidden;
}
</style>

可悲的是，这也会禁用页面上的滚动。

或者，您可以实现Fancy Scrolling。滚动条更薄，页面看起来更好，滚动更流畅。

试试这个：

以下是脚本：Link

实现：

首先在容器上调用插件。

<script>
$(function() {
$( "#demo" ).customScroll();
});
</script>

这里是CSS：

.phancy-scrollbar {
width: 5px;
border-radius: 4px;
top: 0;
position: absolute;
background: #ccc;
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
transition: opacity .2s;
-webkit-transition-delay: 1s;
opacity: 0;
}
.phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar {
opacity: 1;
-webkit-transition-delay: 0s;
}
.phancy-scrollbarbutton {
width: 100%;
border-radius: 4px;
top: 0;
position: absolute;
background-color: #999;
}

希望这会有所帮助。干杯!!

Answer 3

/* attributes overflow, background-size modified */    

html,body,.container-fluid{     
height:100%;      
overflow: hidden; // -> newly added
}

.row{
height:100%;
}
img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain cover; // modified here
  width: 100vw;
  height: 100vh;
 }

plunker demo

响应式背景图像 - 自举网格 - 滚动条问题

3 个答案: