Images not sitting properly within my Bootstrap divs

Question

I've been trying to fit my images in my responsive grid design, but try as I might, it doesn't work. My images are sizes 375*250px with exception to one, which is 745*250px

I have put images of what I would like the layout to be, but what it actually turns out to be like this (for larger screens) instead of like this (desired for larger screens)

My code is below - been trying viewport widths for the divs containing the images, but it doesn't seem to work - the images seem to be overflowing the grid area defined for them.

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

This is the 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

While I have split it into 2 rows as suggested by @Saurabh and @Aziz (thanks folks!) It results in the bigger size having a 2px white space between the 2 rows at the breakpoint like this I have done this :

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

With an updated 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%;
    }

}

Answer 2

By using simple bootstrap classes it is quite difficult to use those type of grids. For that purpose you have to use row-wise structure to fit those images in your container, like

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

I assume here, height of all images is same and width of a big horizontal image is 2 times that of small image

but this type of row-wise structure gets messy when there are so many images on a single page. So for so many images, you may use plugin Masonry which is free and easy to use.It is best suited for image gallery like structures.

Answer 3

You could give the img tags a max-width: 100%

Answer 4

The easiest solution is to use the built-in Bootstrap responsive image class. This will allow your images to scale to the parent element. To do so for your example code, it is this simple:

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

Hope this helps!

Answer 5

It looks like the height of #seeBig is pushing the #do and #stay down. Is there a link to the page where we could see what else is going on? Thanks.