Image orientation (portrait vs landscape) aware transformations for w, h and aspect

[clemdee]

I find myself in a situation where I have both landscape and portrait images (loaded via import.meta.glob), and I want to resize them so that their larger side do not exceed 1000px, and also ensure a 16/9 aspect ratio in their respective orientation.

Currently, this is not possible to do, as we only have w and h directives, and aspect-ratio is independent from orientation.

I can see two solutions for this:

minSide, maxSide and orientedAspect

In a similar idea to vmin / vmax css units, corresponding to the smaller / larger size between vh and vw, we could have here two new directives: minSide and maxSide, allowing to set the size of the smaller / larger side of the image.

We would in addition have a new orientedAspect, that would perform the aspect ratio taking into consideration the image orientation.

It would be used like the following:

import Image from 'example.jpg?maxSide=1000'
import Image from 'example.jpg?minSide=640&orientedAspect=16:9'

These names can be bikeshedded if needed.

orientationAware

Instead of introducing a new directive for each directive that is sensitive to image orientation, we could instead just introduce a single one, specifying how to apply these transforms based on the image orientation.

So when the orientationAware directive is specified, the image is always handled as if in landscape mode:

• w resizes the larger side
• h resizes the smaller side
• aspect is in the format large:small

It would be used like the following:

import Image from 'example.jpg?orientationAware&w=1000'
import Image from 'example.jpg?orientationAware&h=640&aspect=16:9'

Likewise, the directive name can probably be changed to something more desirable.

---

Do you have an opinion about the preferred approach?

[clemdee]

seems related: #722