Allow for multiple aspect-ratios on different breakpoints
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
I couldn't find anything about this in the documentation, but please direct me to it if its already supported.
Enviroment:
"devDependencies": {
"@nuxt/image-edge": "1.0.0-27968280.9739e4d",
"nuxt": "^3.2.3"
}
Request explanation:
I want the possibility to get different aspect ratios on different breakpoints (eg. 1/1 on 400w, 1/2 on 1200w). As of now I've only managed fetch scaled versions of the original aspect ratio.
Desired output
<picture>
<source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279">
<source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300">
<img src="https://via.placeholder.com/1500x300" width="1500" height="300">
</picture>
Notice that each <source> has its own width and height attribute
For guick reference:
This is the output (without trying to get multiple aspect ratios) on the official codesandbox playground
<picture>
<source
type="image/webp"
srcset="
/_ipx/f_webp,s_200x133/images/mountains.jpg 200w,
/_ipx/f_webp,s_500x333/images/mountains.jpg 500w,
/_ipx/f_webp,s_1024x683/images/mountains.jpg 1024w
"
sizes="(max-width: 320px) 200px, (max-width: 768px) 500px, 1024px"
/>
<img
src="/_ipx/f_jpeg,s_1024x683/images/mountains.jpg"
srcset="
/_ipx/f_jpeg,s_200x133/images/mountains.jpg 200w,
/_ipx/f_jpeg,s_500x333/images/mountains.jpg 500w,
/_ipx/f_jpeg,s_1024x683/images/mountains.jpg 1024w
"
sizes="(max-width: 320px) 200px, (max-width: 768px) 500px, 1024px"
width="3750"
height="2500"
/>
</picture>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Review the official CodeSandbox playground output and the current documentation first, then trace how breakpoint sizes become the responsive markup shown in the issue. Done means supporting distinct aspect ratios and width/height attributes per breakpoint while preserving the existing responsive image behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100