Bootstrap背景图像网格

Question

我开始使用bootstrap,学习教程等.我想构建一个只有图像(很多)形成背景的页面,它们之间没有边框和空格.种马赛克.

尝试了很多东西,包括一些教程引导网格系统,但我没有找到线索.

我发现了一些jQuery的东西,但使用bootstrap将是一个加号.它能回应吗？

<div class="container">
  <div class="row">
    <div class="col-lg-6"> 
      <img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" class="img-responsive" alt="Responsive image">
     </div>
   </div>
 </div>

Answer 1

是的,它可以响应.

摆脱图像之间的空间如果使用Bootstrap 3,它会更容易.Bootstrap 3现在使用填充而不是边距来创建css中的"装订线".

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

然后只需将no-gutter添加到要删除间距的任何行中:

 <div class="container">
  <div class="row no-gutter">
    <div class="col-lg-6"> 
    <img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" class="img-responsive" alt="Responsive image">
    </div>
    <div class="col-lg-6"> 
    <img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" class="img-responsive" alt="Responsive image">
    </div>
  </div>
 </div>

使所有图像处于相同的高度

img {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

无论宽度如何,图像高度均为100%,以免拉伸图像

img {
        position: relative;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
    }

好吧所以我的错我使用了'.img'而不是'img'

现在你可以使用左拉类作为

<div class="col-lg-6 pull-left"> 
    <img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg"  alt="Responsive image">
</div>

要么

img {
    float: left;
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
}

DEMO