CODEWITHSUNDEEP
cssimageresponsive
Michael Raysh
Michael Raysh

Reputation: 3

Can one create an image grid with different sized images using css or bootstrap?

I created a grid with different sized images with the following code in CSS:

.wrapper{ 
   width: 100%;
   margin: 0px auto;
   display: inline-block;
   text-align:center;
   padding: 25px 40px;
   max-height: 190px;
   margin: 0px auto;
   min-height: 200px;

}

  .table-center{
        padding-top: 15px;
}

/* Image Classes*/

.image-box{
    max-width: 250px;
    max-height: 150px;
    /*float: left;*/
    display: inline-block;
    padding: 0px 40px 30px 40px;
}

My images when I resize the window to roughly 1200px

I put all my images of varying sizes into image box and everything works pretty well until I resize the browser. Can anyone offer a better solution? One will be responsive in every size?

Upvotes: 0

Views: 588

Answers (2)

sn3ll
sn3ll

Reputation: 1685

You need to use @media queries. Learn about them here.

Basically, you set different sizes for different screen resolution breakpoints:

@media (max-width: 600px) {
  .image-box{
    max-width: 150px;
    max-height: 50px;
  }
}
@media (max-width: 1000px) {
  .image-box{
    max-width: 250px;
    max-height: 150px;
  }
}

etc...

Upvotes: 1

StefanBob
StefanBob

Reputation: 5128

A full jsfiddle or codepen example would be more helpful but I can say:

Try using flexbox instead:

.image-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info

Upvotes: 0

Related Questions