Concerns regarding fixed layout sizing

[florentb]

From what I read in the doc and what I experiment, the width and height attributes are mandatory. This is a good thing for the CLS reasons explained in the doc but I think they are currently misused. The main reason we have to put width and height on img elements is to inform the browsers about the aspect ratio.

Here is a quote of Addy Osmani on the subject (full article here).

Modern browsers now set the default aspect ratio of images based on an image's width and height attributes so it's valuable to set them to prevent layout shifts. Thanks to the CSS Working Group, developers just need to set width and height as normal and the UA stylesheets of all browsers add a default aspect ratio based on the element's existing width and height attributes.

In the current implementation, the width is used to define the width of the container which in responsive development is a blocking behavior. I think developers should be responsible for sizing their items while nuxt-image should adopt a responsive approach with relative sizings.

Eg: https://codepen.io/twicpics/pen/627fd52cd4dc523ff72c2fadef9b78a0?editors=1100

Then let browsers choose the correct image by playing with srcset.

Eg: https://codepen.io/twicpics/pen/b87821d341540afe22cd079059536f84?editors=1100

Regarding the placeholder behavior, same idea: the padding-top trick could be dynamically computed by using CSS calc().

.placeholder {
  padding-top: calc(height / width * 100%);
}

Eg: https://codepen.io/twicpics/pen/d6317ba5001ecdd3f2920d7dfb2e782a?editors=1100

I didn't dig into the "fit" attribute but it shouldn't be a problem.

Does it make sens?

[farnabaz]

Hey @florentb, Thank you for your complete explanation. I agree, the current state of nuxt-image has blocking behavior in responsive development. Like your suggestion, in the next changes fixed-width will remove from the wrapper element, and the ratio will be used to preserve image scale. There are three possible ways to calculate ratio:

• The ratio prop provided by user
• height / width * 100
• use internal service to find image width and height for ratio calculation With the third option user does not need to provide any size, nuxt-image automatically calculates images ratio. All users need to do is sizing their images.

Also, the wrapper element in nuxt-images will have width: 100% in its class styles. This a fallback size in case users does not size their images.