html - Bootstrap 背景图像网格

Question

我从 Bootstrap 、学习教程等开始。我想构建一个页面，其中只有图像(很多)形成背景，它们之间没有边框和空间。有点像马赛克。

尝试了很多东西，包括一些教程 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;
}

为了不拉伸(stretch)图片，无论宽度如何，图片高度都是100%

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

好的，所以我错了，我在上面使用了“.img”而不是“img”

现在你可以使用 pull-left 类作为

<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