Nuxt•8mo ago

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•8mo 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.

_castroOP•8mo ago

Both are not working @Nasr galal

_castroOP•8mo 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:

_castroOP•8mo ago

But on my local host, it's like:

Gaming

Programming

NuxtImg Image Shrinking