CODEWITHSUNDEEP
javascriptcss
Ben Alan
Ben Alan

Reputation: 1695

How to arrange randomly sized images into equal length rows?

I'm designing a website for an artist, and using JQuery to pull images from directories to display on their website.

The problem is that the images are all different sizes, and it's hard to make them look nice in a grid.

In the following example, you can see the images are the same height as the other images in their row, but the width of each row is adjusted so that the rows are of equal length.

How do you display images this way?

How is this achieved? Here is a live example: https://www.zhangjingna.com/

Upvotes: 2

Views: 948

Answers (2)

Vahid
Vahid

Reputation: 655

You should dynamically check aspect ratio of every image, if it is horizontal (landscape), then set image width to 33.3% and don't set height.

If aspect ratio of image is vertical (portrait), then set image height to your row height, for example 300px and don't set width.

Upvotes: 1

IcyTv
IcyTv

Reputation: 485

This is achieved using a flexbox and flex-wrap in css.

You probably also need some logic to determine the width of the three images you want to display and use that to set the images width according to that in relation to window.innerWidth. Then in css you can set the height to your desired height (maybe an average of the heights of your images?) and set the object-fit css property of your images to cover;

BTW: The way your example does it is by just arranging the images with absolute positions, which is a nightmare

Upvotes: 1

Related Questions