Cloudinary fit values: Width/Height attributes when using fit="fit" don't use actual outcome for Width/Height

The Nuxt-Img docs are missing fit="fit". fit="fit" is the same as what Nuxt-Img calls fit="contain".

https://image.nuxtjs.org/providers/cloudinary#cloudinary-fit-values

https://image.nuxtjs.org/components/nuxt-img#fit

When you use fit="contain" with your provider set to Cloudinary, you do not get the expected outcome.

When using fit="fit" you want to either have a max height or width for the image, preserving aspect ratio. This means for the example below that a portrait image will have 500px in height and unknown width - and vice-versa for landscape.

      <nuxt-img
        provider="cloudinary"
        fit="fit"
        :src="imgUrl"
        :height="500"
        :width="500"
      /> 

However, the rendered image gets both attributes set, like so:

      <img
        src="https://res.cloudinary.com/xyz/image/upload/f_auto,q_auto,w_500,h_500,c_fit/xyz/img.jpg" 
        width="500" 
        height="500"
      /> 

Therefore, the browser gets wrong information about how to render the image on the screen.

Would there be a way to get this right without having the image aspect ratio beforehand?

Start with the Cloudinary fit values and Nuxt-Img fit documentation linked in the issue, then reproduce the provided example with portrait and landscape images. Done means the rendered image dimensions and HTML attributes reflect the actual contain/fit outcome without requiring a known aspect ratio beforehand.