CODEWITHSUNDEEP
jquerycssimageresizeimage-gallery
Dmitri Zaitsev
Dmitri Zaitsev

Reputation: 14046

Resizing images in a gallery to fit the rows but keeping the aspect ratio of each image

I need to display a gallery of images that are roughly of similar size but not exactly equal and their aspect ratios are also different.

I would like to display them in rows of variable height but the all row having the same total width fitting the screen size. Each image is allowed to scale (ideally as little as possible) preserving aspect ratio to fit the height of its row.

Is there a simple way to do it or perhaps a library (or jQuery plugin or AngularJS directive)?

I have checked several libraries imitating Pinterest design, which however make fixed column width instead of fixed row width. That is great for infinite scroll but is not suitable for showing a small gallery of fixed size (5-50 images).

Upvotes: 1

Views: 827

Answers (1)

Anton
Anton

Reputation: 2636

Actually, there is one plugin I have developed. So far a jQuery plugin, but an AngularJS version will come soon. It is called jPictura.

See a working example here. I believe it does exactly what you need and its usage is as simple as this:

$(document).ready(function () {
    $('#my-gallery').jpictura({
        layout: { itemSpacing: 0, justifyLastRow: true, idealRowHeight: 200}
    });
});

<div id="my-gallery">
    <div class="item"><img src="foo.jpg" /></div>
    <div class="item"><img src="bar.jpg" /></div>
</div>

See the full documentation on GitHub.

Upvotes: 1

Related Questions