CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrapresponsive-images
user5415197
user5415197

Reputation:

How to fill a div with an image and still be responsive?

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

Upvotes: 0

Views: 936

Answers (2)

Chrillewoodz
Chrillewoodz

Reputation: 28318

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.

Upvotes: 1

Doug
Doug

Reputation: 1

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

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

Upvotes: 0

Related Questions