Html 引导背景图像网格

我从引导、学习教程等开始。我想构建一个只有图像（许多）构成背景的页面，它们之间没有边界和空间。有点像马赛克

我尝试了很多东西，包括一些引导网格系统的教程，但我没有发现任何线索

我发现了一些jQuery的东西，但是使用引导程序会更好。它会有反应吗

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

---

是的，它可以响应

要消除图像之间的空间 如果你使用Bootstrap3，它会简单得多。Bootstrap3现在使用填充代替边距在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;
}

然后，只需在要删除间距的任何行中添加任何檐槽，例如：

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

对于图像高度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>

---

这对我来说很有效，这应该会让一行6幅图像紧密地连在一起。 可用于两个图像“col-md-6”或三个图像“col-md-4”。 为“#image div.col-md-2”或“#image div.row”创建css非常重要，这样就不会影响页面中其他网格中的这些类，而这些网格仅在#image div或您所称的任何网格中

CSS部分

#图像分区行{
边际上限：0px；
边缘底部：0px；
左边距：0px；
右边距：0px；
填充顶部：0px；
垫底：0px；
左侧填充：0px；
右边填充：0px；
}
#图像分区col-md-2{
边际上限：0px；
边缘底部：0px；
左边距：0px；
右边距：0px；
填充顶部：0px；
垫底：0px；
左侧填充：0px；
右边填充：0px；
}

---

HTML部分

文件段
文件段
文件段
文件段
文件段
文件段

是：）还有一个问题。我有我所期望的，但有些图像有不同的高度。引导css设置图像的高度：自动。这不会是一个问题，但不同的高度会导致图像之间出现空白。你知道其中的难处吗？如果图像与其他图像保持一致，即使它们有不同的大小，也会很好：）你想要所有高度相同的图像吗？我可以“玩”列，因为引导程序需要12列。但有些图像有不同的高度，这使得出现空白直到这种差异。我会尽力展示给大家看。如果这些图像能够相互匹配，那就太好了。bootstrap允许吗？或者，是的，所有相同高度的图像都会更简单。如果我以前对科门特有很多要求：）好的，再次感谢：）现在我需要找出一种方法来避免拉伸图像。即使它不能显示整个图像。这样，图像的大小将被调整

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

<style>
    #image-div .row{
      margin-top:0px ;
      margin-bottom:0px ;
      margin-left:0px ;
      margin-right:0px ;
      padding-top:0px ;
      padding-bottom:0px ;
      padding-left:0px ;
      padding-right:0px ;
    }
    #image-div .col-md-2{
      margin-top:0px ;
      margin-bottom:0px ;
      margin-left:0px ;
      margin-right:0px ;
      padding-top:0px ;
      padding-bottom:0px ;
      padding-left:0px ;
      padding-right:0px ;
    }

  </style>

   <div class="row">
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
   </div>