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 is this achieved? Here is a live example: https://www.zhangjingna.com/
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
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.
