image icon indicating copy to clipboard operation
image copied to clipboard

Limit to screen size breakpoints in img and picture

Open mrillusion opened this issue 3 years ago • 0 comments

@nuxt/image - v0.7.1

I have noticed it appears there is an issue with adding additional screen sizes, my component has the following:

<nuxt-picture
  class="hero-img raster"
  :src="asset.filename"
  :alt="asset.alt"
  sizes="xs:100vw sm:100vw md:140vw lg:140vw xl:115vw xxl:95vw xxxl:75vw xxxxl:55vw"
  format="webp"
/>

Note I have additional sizes which I have added to the nuxt config as shown below:

options: {
  screens: {
	  xs: 320,
	  sm: 425,
	  md: 768,
	  lg: 1024,
	  xl: 1280,
	  xxl: 1536,
	  xxxl: 1920,
	  xxxxl: 2560,
  },
}

Checking the html code it only includes upto the "xl" size completely, the "xxl" size is cut off and only has ",95vw" displayed in the attributes and the xxxl and xxxxl sizes are completely missing. image

I have noticed this issue on v0.6.1 and tried updating to v0.7.1 with no change.

Has anyone else experienced this?

mrillusion avatar Jun 30 '22 02:06 mrillusion