nuxt / nuxt/image

Set height with sizes attribute

Open
#900 1 comment 1 reaction 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

Usecase: you have long image (width > height) and you need square to thumbnail, eg:

image

You cant do object: cover, because settings sizes="'xs:72px sm:102px md:114px lg:138px xl:160px xxl:184px 2xl:552px'" do this:

image


image

It's blurry and not 138x138.
But if you specified fit="cover", it doesn't help, because getSizes receives already counted 138x82 as width/height

So, what if you can provide height in sizes property xs:72x72 sm:102x102 md:114x114 lg:138x138 xl:160x160 xl:184x184 2xl:552x552?

And with this fit modifier will work!

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

Start by tracing the getSizes entry point and how the sizes property reaches the fit modifier. Check how width and height are currently calculated for each breakpoint, then verify that accepting square dimensions produces 138x138 output with fit="cover" at the documented sizes. Add or update focused tests for parsing the proposed height values and the resulting dimensions.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.