图像未正确放置在我的 Bootstrap div 中答案

【问题标题】：Images not sitting properly within my Bootstrap divs图像未正确放置在我的 Bootstrap div 中
【发布时间】：2016-05-17 19:50:16
【问题描述】：

我一直在尝试使我的图像适合我的响应式网格设计，但尽我所能，它不起作用。我的图片尺寸为 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%;
   }
}

【问题讨论】：

@Saurabh 是对的，您需要将每个集合包装成一行。此外，您使用的冗余类 (col-md-4 col-lg-4) 应该只是 cold-md-4，因为它在大屏幕中也将保持 4/12。而img 标签确实需要在 HTML5 中关闭。这是一个基本的演示：jsfiddle.net/azizn/z8dupbsL
我还建议通过验证器运行您的 CSS 代码。这么多错误...
问题是它是一个“动态”行，当屏幕变小时，“看”图像会出现在“吃”和“做”下方，其中吃和做占据比例的顶行2:1 - 因此将其分成行将无济于事:(
或者 display = none 对行绑定有帮助吗？这里有点新手 - 因此查询。也会将我的代码通过验证器：/
嗨 - 两行之间有一个小的 2px 分隔 - 特别是当屏幕尺寸较大时 - 有什么解决方法吗？请看一下我在这篇文章中作为答案放置的修改后的代码。感谢您的建议 - 效果非常好！

标签： html css image twitter-bootstrap

【解决方案1】：

通过使用简单的引导类，很难使用这些类型的网格。为此，您必须使用 row-wise 结构来适应容器中的这些图像，例如

<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，它是免费且易于使用的。它最适合像画廊这样的结构。

【讨论】：

嗨 - 行方式有效！我用 display:none 制作了另外 2 个 img div 并设置了边距，填充为 0 并且效果很好:)

【解决方案2】：

最简单的解决方案是使用内置的 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-->

希望这会有所帮助！

【讨论】：

【解决方案3】：

看起来#seeBig 的高度正在将#do 和#stay 向下推。是否有指向该页面的链接，我们可以在其中看到正在发生的其他事情？谢谢。

【讨论】：

【解决方案4】：

你可以给 img 标签一个 max-width: 100%

【讨论】：

【解决方案5】：

虽然我已按照@Saurabh 和@Aziz 的建议将其分成两行（谢谢大家！）它导致更大的尺寸在断点like this 的两行之间有一个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%;
    }

}

【讨论】：