Question

我一直在尝试在我的响应式网格设计中使用我的图像，但尽可能地尝试，但它不起作用。我的图像大小为375 * 250px，但不包括一个，即745 * 250px

我已经提供了我希望布局的图像，但它实际上是like this (for larger screens) 而不是like this (desired for larger screens)

我的代码如下 - 一直在尝试包含图像的div的视口宽度，但它似乎不起作用 - 图像似乎溢出了为它们定义的网格区域。

<div class="row" id="picture">
    <div class ="col-md-8 col-lg-8" id="seeBig">
    <img src="see.jpg" />
    </div> <!--See Big-->

   <div class ="col-xs-8 col-sm-8 col-md-4 col-lg-4" id="eat">
   <img src="eat.jpg" />
   </div> <!--Eat -->

  <div class ="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="do">
  <img src="do.jpg" />
  </div> <!--Do -->

  <div class ="col-xs-12 col-sm-12" id="seeSmall">
  <img src="see.jpg" />
  </div> <!--See Small-->

  <div class ="col-xs-6 col-sm-6 col-md-4 col-lg-4" id="stay">
  <img src="stay.jpg" />
  </div> <!--Stay -->

  <div class ="col-xs-6 col-sm-6 col-md-4 col-lg-4" id="shop">   
  <img src="shop.jpg" />

</div> <!--Picture-->

这是CSS

#seeSmall,#eat,#stay,#shop,#do, #seeBig{
border: solid 1px black;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
@media all and (min-width: 992px) {

#seeSmall{
    display: none;
    }
#seeBig {
    width:60%vw;
    height:20%vw;


}   
#eat , #stay ,#shop ,#do {
    width:30%vw;
    height:20%vw;


    }

}


@media all and (max-width: 991px) and (min-width: 768px) {


#seeBig{
    display:none;

}
#seeSmall {
    width:90%vw;
    height:20%vw;

    }
#stay {
    width:45%vw;
    height:20%vw;

    }
#shop {

    width:45%vw;
    height:20%vw;

    }
#eat {

    width:30%vw;
    height:20%vw;

}
#do {
    width:60%vw;
    height:20%vw;

   }

}

@media all and (max-width: 767px) and (min-width: 250px) {

#seeBig{
    display:none;
    }
#seeSmall {

    width:85%vw;
    height:17%vw;
    max-width:100%;
    }
#stay {
    width:42.5%vw;
    height:17%vw;
    max-width:100%;
    }
#shop  {
    width:42.5%vw;
    height:17%vw;
    max-width:100%;
    }
#eat {
    width:28%vw;
    height:17%vw;
    max-width:100%;
    }
#do {

    width:57%vw;
    height:17%vw;
    max-width:100%;
   }
}

Answer 1

通过使用简单的引导类，使用这些类型的网格非常困难。为此，您必须使用行式结构来容纳容器中的这些图像，例如

<div class="row">
    <div class="col-md-8"><img class="img-responsive" src"big_horizontal.jpg"></div>
    <div class="col-md-4"><img class="img-responsive" src"another_img1.jpg"></div>
</div>
<div class="row">
    <div class="col-md-4"><img class="img-responsive" src"another_img2.jpg"></div>
    <div class="col-md-4"><img class="img-responsive" src"another_img3.jpg"></div>
    <div class="col-md-4"><img class="img-responsive" src"another_img4.jpg"></div>
</div>

我假设这里所有图像的高度相同，大水平图像的宽度是小图像的2倍

但是当单个页面上有如此多的图像时，这种行式结构会变得混乱。因此，对于这么多图像，您可以使用免费且易于使用的插件Masonry。它最适合图像库之类的结构。

Answer 2

看起来#seeBig的高度正在推动#do和#stay。是否有链接到我们可以看到其他内容的页面？感谢。

Answer 3

最简单的解决方案是使用内置的Bootstrap responsive image class。这将允许您的图像缩放到父元素。为了您的示例代码，这很简单：

<div class ="col-md-8 col-lg-8" id="seeBig">
    <img src="see.jpg" class="img-responsive" alt="Responsive image Title">
</div> <!--See Big-->

希望这有帮助！

Answer 4

你可以给img标签一个max-width：100％

Answer 5

虽然我按照@Saurabh和@Aziz的建议把它分成了两行（感谢大家！）它会导致更大的尺寸在断点{2}处的2行之间有2px的空白区域我这样做了：

<div class="row" id="pictureBig">
<div class ="col-md-8" id="seeBig">
<img src="see.jpg" >
</div> <!--See Big-->

<div class ="col-md-4" id="eatBig">
<img src="eat.jpg"> 
</div> <!--Eat Big -->
</div> <!--Picture Big-->
<div class ="col-xs-6" id="eatSmall">
<img src="eat.jpg">
</div> <!--Eat Small -->
<div class ="col-xs-6" id="doSmall">
<img src="do.jpg" >
</div> <!--DoSmall -->
<div class ="row" id="pictureSmall">

<div class ="col-md-4" id="doBig">
<img src="do.jpg" >
</div> <!--DoBig -->

<div class ="col-xs-12" id="seeSmall">  
<img src="see.jpg" >
</div> <!--See Small-->

<div class ="col-xs-6 col-md-4 " id="stay">
<img src="stay.jpg" />
</div> <!--Stay -->

<div class ="col-xs-6 col-md-4 " id="shop">
<img src="shop.jpg" >
</div> <!--Shop -->
</div> <!-- Row picture Small-->

使用更新的CSS：

#seeSmall,#eatSmall,#stay,#shop,#doSmall, #seeBig,#doBig,#eatBig{
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
margin:0;
padding:0;
}
#seeSmall img,#eatSmall img,#stay img,#shop img,#doSmall img, #seeBig img,  #eatBig img, #doBig img{
flex-shrink:0;
min-width:100%;
min-height:100%;

}

#pictureBig, #pictureSmall{

border: none;
margin:0;
padding:0;
}
@media all and (min-width: 992px) {

#seeSmall , #eatSmall,#doSmall{
    display: none;
    }

#seeBig {
    width:60%vw;
    height:20%vw;
    max-width:100%;

}   
#eatBig , #stay ,#shop ,#doBig {
    width:30%vw;
    height:20%vw;
    max-width:100%;

  }

}


 @media all and (max-width: 991px) and (min-width: 768px) {

   #seeBig, #eatBig,#doBig{
    display:none;

   }
    #seeSmall {
    width:90%vw;
    height:20%vw;
    max-width:100%;
     }
    #stay ,#eatSmall,#shop,#doSmall {
     width:45%vw;
     height:20%vw;
     max-width:100%;
     }

    }

@media all and (max-width: 767px) and (min-width: 250px) {

#seeBig, #eatBig, #doBig{
    display:none;
    }
#seeSmall {

    width:85%vw;
    height:17%vw;
    max-width:100%;
    }
#stay ,#eatSmall,#shop,#doSmall{
    width:42.5%vw;
    height:17%vw;
    max-width:100%;
    }

}

图片无法正确放入我的Bootstrap div

5 个答案: