CSS responsive image grid

Question

I am struggling with creating a responsive image gallery. I am using CSS and bootstrap, i tried with tag and as background, I couldnt get it to work.

so, this is what I want to achieve:

https://www.socialprintstudio.com/products/

image grid without image warp or overlapping

When you make your browser smaler, image aspect ratio stays the same, only the size changes and later on you get 2 per row, that I can do with col-lg-4 col-md-6 etc...

I would also prefer if I could do this with img tag as I think it is easier to fade one image to another on hover.

this is my HTML

<div class="item " data-categoryid="2">
    <div class="item-image">
        <div class="img-bg" style="background: url(&quot;http://laravel.dev/images/bon2.jpg&quot;); display: none;"></div>
        <div class="img-bg" style="background: url(&quot;http://laravel.dev/images/bon.jpg&quot;);"></div>
    </div>
        <div class="item-name">Some name</div>             
        <div class="item-price">price €</div>
        <div class="item-button">
            <a href="#" class="btn btn-primary">Button.</a>
        </div>
</div>

Answer 1

As you said, using bootstrap's .col classes is the way to go here: Here's a resizable jsfiddle: https://jsfiddle.net/aL1ndzgg/1/

Images, by default, will keep their aspect ratio, unless you specify both the width and the height.

For the hover effect you can have only one of the images for each box set as as position: absolute; ; that way, the other image will set the size of the box.

 .single-image-container { margin-bottom: 20px; position: relative; } .single-image-container img { width: 100%; } .blocker { position: relative; overflow: hidden; } .hover-image { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 125ms ease-in-out; } .single-image-container:hover .hover-image { opacity: 1; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> </div> </div> 

Answer 2

To make your images responsive add the following CSS:

.item img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

So as long as the image source is square the image will resize to its bootstrap grid

You can also try the following: CSS Tricks: Responsive Images