html – How to make image widths adapt but heights remain equal in each row-ThrowExceptions

Exception or error:

I would like to create a fluid responsive image thumbnail gallery, (as in Squarespace “Wexley” template), where the various image widths always adapt so that the heights are always equal along each row.

It is fully responsive so there are no fixed dimensions for the images. The images are of different aspect ratios, some landscape and some portrait. The images must not be cropped or distorted.
Depending on wether the images are wide or narrow, the number of images will always vary in each row, and the number of images on a row adapt with the responsive window. There is always equal space-between images.

I do not know if this technique uses “Flexbox” or “CSS Grid Layout”.

See visual reference:
visual example

or reference:
https://wexley-demo.squarespace.com/?nochrome=false&_ga=2.134142414.1936449269.1582536006-1078565499.1582285429&_gac=1.213182752.1582286460.EAIaIQobChMI0sHnsMzi5wIVFeDtCh01QAXzEAAYASABEgJkQfD_BwE

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *