Responsive Image Gallery Solution

Question

I would like to ask about flexible galleries.

This is an example of what I want to do. So, as you can see, the image size is not fixed. This is just a thumbnail with preserved proportions.

I'm not sure how this works. How do I make responsive?

How to do it? If there is any ready-made solution, let me know.

Thanks.

Answer 1

As others have said, you can use masonry

Demo: https://jsfiddle.net/2Lzo9vfc/193/

HTML

<div class="gallery">
    <img src="http://placehold.it/450x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/250x150">
    <img src="http://placehold.it/550x150">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/250x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/450x150">
</div>

Js

$('.gallery').masonry({
  itemSelector: 'img',
   columnWidth: 1,
});

Or you can try to do something with flexbox as follows

Demo: https://jsfiddle.net/2Lzo9vfc/194/

CSS

img {
    margin: 5px;
    flex: 1 0 auto;
}

.gallery {
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap;
    align-items: flex-start;
}

column, ,

: https://jsfiddle.net/2Lzo9vfc/197/

img {
    display: inline-block;
    margin: 10px;
    width: 100%;
}

.gallery {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

Answer 2

http://masonry.desandro.com/ .