css - 响应式背景图片 - Bootstrap 网格 - 滚动条问题

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

这里有一些东西。图片全屏，内容在底部。

如果删除内容，则不会出现滚动条。

Bootstrap :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>