NuxtImg Image Shrinking
Hey y'all,
I'm having some trouble with NuxtImg, and I'm using it to display the Google Play and App Store badges, like this:
The problem is, the images are shrinking down to a smaller size. Is there a way to keep them at their original size without writing a whole CSS rule? Maybe a special prop in NuxtImg itself?
I've checked the docs, and it's just telling me to:
manually set the width and height properties in the <NuxtImg> component to match the actual size of the images.There must surely be a better way. Any help is dope, thanks!
4 Replies
To make it simple:
- If you want to control how the image scales within a container while maintaining aspect ratio, use
fit
prop.
You can check here: https://image.nuxt.com/usage/nuxt-img#fit
- If you need responsive image sizing based on screen size, use sizes
prop.
You can check here: https://image.nuxt.com/usage/nuxt-img#sizes
- And finally, If you want to display the images at a specific static size (which I think you might not want), use width
and height
props.
Hope this helps 🙂Both are not working @Nasr galal
This is what I did:
But it still ends up being like this on Vercel:
But on my local host, it's like: