NuxtImg Image Shrinking

[frigid merlin]

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" />

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!

[patent girder]

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 🙂

[frigid merlin]

Both are not working @patent girder

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>

But it still ends up being like this on Vercel: