Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support different aspect ratios for different screen sizes #1466

Open
LeeKrane opened this issue Aug 30, 2024 · 1 comment
Open

Support different aspect ratios for different screen sizes #1466

LeeKrane opened this issue Aug 30, 2024 · 1 comment

Comments

@LeeKrane
Copy link

LeeKrane commented Aug 30, 2024

In my current project I need the ability to change the aspect ratio of an image, depending on the current screen size (for responsive design). I know that you can define the aspect ratio of an image by setting an explicit width and height (if you use sizes, then it is responsive):

<NuxtImg ... fit="crop" width="750px" height="375px" sizes="480px xs:550px sm:750px" />

(Using TailwindCSS)
My problem here is, that I need different aspect ratios once I hit "md" and "2xl" screen sizes. I currently solve this by using 2 more NuxtImg components, where the 2 NuxtImgs with the wrong aspect ratio for the current screen width will be hidden via display: hidden.

My idea would be to add some kind of aspect property like aspect="2/1 md:3/5" or to integrate it into the sizes property kind of like sizes="480px/240px md:450px/750px" (which would probably be a better idea) or something like that. I don't know how that could conflict with the existing height property, but if this feature could somehow work it would be really neat.

@bernhardberger
Copy link

Art direction should be done with <picture> tag, not with an <img srcset.

If the browser downloads a bigger image from the srcset for whatever reason (e.g. you turn your device or make your browser windows smaller) it won't download a lower quality image to replace it on the fly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants