Image pane component


In order to make one type of image galleries, we need an image "pane": a fixed-height, medium-sized image that extends along the line axis as needed to maintain the image aspect ratio. (Once the use cases are understood better in the future, some sort of along-block or other modifier to restrict the width rather than the height might be useful.)

One big difference between an "image pane" and an "image thumbnail" (in addition to the latter being larger) is that image thumbnails are constrained within an area, so that a portrait-oriented image would be centered vertically, and a landscape-oriented image would be centered horizontally. An image pane is only constrained in size vertically. This allows a row of images to all have the same height, regardless of whether they are in landscape or portrait orientation.




Garret Wilson
December 20, 2020, 7:59 PM

For musings on resizing images and maintaining the aspect ratio see Setting Height And Width On Images Is Important Again. Another interesting development the article mentions is the appearance of native lazy loading; this is something for the site using Guise Skeleton to possibly use—not Guise Skeleton itself.

For our purposes we can probably just set the height to some rem and then set the width to auto. That's the first thing to try, anyway.

Garret Wilson
December 20, 2020, 9:39 PM

This is looking very nice combined with a brick layout!

The parameters that seem to work best for the moment are:

That gives about five or six images on a typical screen, but displays more on a huge screen and doesn't get too small on a mobile device.


Garret Wilson


Garret Wilson




Fix versions