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
commented
1 week ago
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
wandhdirectives, and aspect-ratio is independent from orientation.I can see two solutions for this:
minSide,maxSideandorientedAspectIn a similar idea to
vmin/vmaxcss units, corresponding to the smaller / larger size betweenvhandvw, we could have here two new directives:minSideandmaxSide, 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:
These names can be bikeshedded if needed.
orientationAwareInstead 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
orientationAwaredirective is specified, the image is always handled as if in landscape mode:wresizes the larger sidehresizes the smaller sideaspectis in the formatlarge:smallIt would be used like the following:
Likewise, the directive name can probably be changed to something more desirable.
Do you have an opinion about the preferred approach?