程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

我一直在尝试使我的图像适合我的响应式网格设计，但尽我所能，它不起作用。我的图片尺寸为 375*250px，只有一张是 745*250px

我已经放置了我想要的布局的图像，但实际上结果是这样的（对于更大的屏幕） 而不是像这样的（对于更大的屏幕来说是理想的）

我的代码在下面 - 一直在尝试包含图像的 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%;
   }
}

解决方案

通过使用简单的引导程序类，很难使用这些类型的网格。为此，您必须使用按行结构将这些图像放入容器中，例如

<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 。它最适合像画廊这样的结构。