responsive grid of different sized images with real world proportions and scale

27

October 17, 2019, at 08:30 AM

I have a laravel site that loads product images into a grid-container--fit row through a @foreach loop. The images are all sorts of different sizes, some are portrait and some are landscape. The issue is that, because the grid container and the grid-elements are responsive (a percentage of the viewport width) the images are scaled inconsistently.
For example, I have images that, full size, are 3 x 2, 5 x 9, and 8 x 10. When they're loaded into the responsive grid they pretty much are all scaled to 25% of the view port width. The resulting 'look' of the images in the grid displays the 5 x 9 images larger than the 8 x 10 images at scale.
The distortion is more extreme if you consider portrait and landscape images of the same size. For instance, 5 x 7 and 7 x 5. the landscape images are scaled smaller than the portrait ones because they're all trying to fill a row according to a fixed minmax pixel width.

It can easily be rectified by a table structure rather than a responsive grid, but this is unacceptable!

This is more of a design problem than a code one. The grid is working as intended, but your desired outcome is not a regular grid. Flexbox would be more in line with what you are trying to achieve, but another problem is how to scale your images without constraining them, and still have a proper look and feel. As long as you are forcing a max-height and/or max-width, the images will be shifted to a different scale depending on their original proportions. For that, you would provably need to know and/or control the dimensions of the original images, so that they have a nice enough proportion between each other. Then you could do something like this:

grid requires that spanning through rows or columns is to be set for each element, if you have no idea of the many rows or columns each img needs to make a patchwork, grid (display+grid-template-columns) won't be of any help.

column-width from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns could help :

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

calc() can also help here to mimic responsiveness sizing the columns.

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.