N
Nuxt6mo ago
_castro

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:
<NuxtImg src="google-play.png" />
<NuxtImg src="app-store.png" />
<NuxtImg src="google-play.png" />
<NuxtImg src="app-store.png" />
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
Nasr galal
Nasr galal6mo ago
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 🙂
Nuxt Image
- Nuxt Image
Discover how to use and configure the Nuxt Image component.
_castro
_castroOP6mo ago
Both are not working @Nasr galal
_castro
_castroOP6mo ago
This is what I did:
<div
class="flex flex-col items-start"
v-for="member in teamMembers"
:key="member.name"
>
<a :href="member.url" target="_blank">
<NuxtImg
:src="member.image"
:alt="member.name"
class="mb-4 cursor-pointer lg:grayscale lg:hover:grayscale-0 transition duration-300"
fit="cover"
width="210"
height="256"
/></a>
<div class="">
<div class="font-medium text-xl">{{ member.name }}</div>
<div class="text-sm">{{ member.role }}</div>
</div>
</div>
<div
class="flex flex-col items-start"
v-for="member in teamMembers"
:key="member.name"
>
<a :href="member.url" target="_blank">
<NuxtImg
:src="member.image"
:alt="member.name"
class="mb-4 cursor-pointer lg:grayscale lg:hover:grayscale-0 transition duration-300"
fit="cover"
width="210"
height="256"
/></a>
<div class="">
<div class="font-medium text-xl">{{ member.name }}</div>
<div class="text-sm">{{ member.role }}</div>
</div>
</div>
But it still ends up being like this on Vercel:
No description
_castro
_castroOP6mo ago
But on my local host, it's like:
No description
Want results from more Discord servers?
Add your server