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

feat: Provide height with sizes attribute #901

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

wokalek
Copy link

@wokalek wokalek commented Jun 29, 2023

Described a feature with use case in this issue #900

Now you can provide height with sizes attribute like this:

md:114px_114px lg:138px_138px

or this, short version:

md:114_114 lg:138_138

Examples:

Old output:
sizes="md:114px lg:138px" with fit="cover" (does nothing, because it's generate w_{width} modifier)

<img 
  src="/_ipx/w_276/images/colors.jpg"
  sizes="(max-width: 768px) 114px, 138px"
  srcset="/_ipx/w_114/images/colors.jpg 114w, /_ipx/w_138/images/colors.jpg 138w, /_ipx/w_228/images/colors.jpg 228w, /_ipx/w_276/images/colors.jpg 276w"
>

New output:
sizes="md:114_114 lg:138_138" with fit="cover"

<img 
  src="/_ipx/fit_cover&amp;s_276x276/images/colors.jpg"
  sizes="(max-width: 768px) 114px, 138px"
  srcset="/_ipx/fit_cover&amp;s_114x114/images/colors.jpg 114w, /_ipx/fit_cover&amp;s_138x138/images/colors.jpg 138w, /_ipx/fit_cover&amp;s_228x228/images/colors.jpg 228w, /_ipx/fit_cover&amp;s_276x276/images/colors.jpg 276w"
>

And now modifiers working well!

image

fit="outside" too! Because this is resize operation now, not only width limit.

image

@danielroe danielroe changed the base branch from v1.0.0-rc.2 to main July 20, 2023 13:46
package.json Outdated Show resolved Hide resolved
@netlify
Copy link

netlify bot commented Jul 20, 2023

Deploy Preview for nuxt-image ready!

Name Link
🔨 Latest commit d38a25f
🔍 Latest deploy log https://app.netlify.com/sites/nuxt-image/deploys/64b93af09bddc20008b790c9
😎 Deploy Preview https://deploy-preview-901--nuxt-image.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@danielroe danielroe added the enhancement New feature or request label Sep 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants