nuxt / nuxt/image

Allow for multiple aspect-ratios on different breakpoints

Open
#768 0 comments 2 reactions 0 assignees View on GitHub

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>

According to this issue this is supported is supported on major browsers (on chrome since v90, Safari since v15 and Firefox since v105)

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.