0

I'm trying to make an image gallery with different images and different sizes. I have included a link to an image to explain what I want. I have made a row with 4 divs which each contains an image. The images have a width and an height. But my images have different sizes. I.e. 600X500. I'm using Bootstrap.

How can I get the images to fill the whole div (400 X 400) and still be responsive?

I have tried to give the image a fixed height and width, but then the images aren't responsive anymore.

<div class="row">
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>   
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>  
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>

CSS

.square {min-width: 400px; min-height: 400px;}

This is what im trying to make, some sort of image gallery

divy3993
  • 5,732
  • 2
  • 28
  • 41

2 Answers2

1

You can do this:

.square > div > img {
  min-width: 400px; 
  min-height: 400px;
  max-width: 100%; 
  max-height: 100%;
}

Which will force it to decrease as the device's screen becomes smaller.

Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
0

Try .square {width:100%; height:auto;}

The image will always be scaled to fit inside the div element.

Doug
  • 1