Next.js Discord

Discord Forum

Why is my Image component smaller than the given size?

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I have an Image component with 150px in width and height. I want it to be at a fixed width of 150px x 150px, but it is reduced to 125.78px x 150px. I'm sure it has something to do with the flexbox, but I have the item property flex: 1 1 0, so I'm not really clear on what exactly is the problem.

This is the TSX file
            <li className="flex flex-row items-center h-full justify-between flex-1">
                <div className=" relative h-full ">
                    <CustomLoader
                        src={food1}
                    />
                </div>
                <div className="w-full h-full flex items-center justify-center">
                    <span>
                        FOOD
                    </span>
                </div>
            </li>

food1 is a jpg that is 500px x 500px

Custom Loader:
const MyImageLoader: ImageLoader = ({ src }) => {
    return src
}

const MyCustomLoader: MyCustomLoaderType = (props) => {
    return <Image

        loader={MyImageLoader}
        alt="Custom loader"
        {...props}
        sizes="100vw"
        unoptimized
        className=" object-cover rounded-[50%] w-full h-full"
    />
}

11 Replies

Clown
"The width and height attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. The width and height do not determine the rendered size of the image file." - Next Docs

Take a look here for more info about image sizing
https://nextjs.org/docs/app/building-your-application/optimizing/images#image-sizing
@Clown "The width and height attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. The width and height do not determine the rendered size of the image file." - Next Docs Take a look here for more info about image sizing https://nextjs.org/docs/app/building-your-application/optimizing/images#image-sizing
Transvaal lionOP
I ended up tinkering so much with it that I landed on the result I wanted. No width to be taken away from the Image. 

<li className="flex flex-row items-center h-full justify-between flex-1">
                <div className=" relative h-full shrink-0 w-[150px]">
                    <CustomLoader
                        src={food1}
                    />
                </div>
                <div className=" h-full flex items-center justify-center">
                    <span>
                        FOOD
                    </span>
                </div>
            </li>



CustomLoader
const MyImageLoader: ImageLoader = ({ src }) => {
    return src
}

const MyCustomLoader: MyCustomLoaderType = (props) => {
    return <Image

        loader={MyImageLoader}
        alt="Custom loader"
        {...props}
        sizes="100vw"
        unoptimized
        fill
        className=" rounded-[50%] "
    />
}
I removed the w-full from the div next to it and added shrink-0 on the image. I wasn't sure if it was an Image Component issue or just me struggling with CSS.
Clown
Its not an issue with Image Component
Width and height are only needed if you pull in from external sources
Next/Image tries to stop Layout shifting which is what happens when images too large or too small get loaded and push other elements around
You can just use the normal <img> component if next/image is giving you issues with sizing.
@Clown You can just use the normal <img> component if next/image is giving you issues with sizing.
Transvaal lionOP
Oh no, I have to get used to this new technology. The standard <img> will also be too slow.
@Clown This link explains it better and if you go with the way defined here it'll be better
Transvaal lionOP
Is it mandatory to always know the size of the image? I had to add the width to the parent element, I thought the image would stretch out as a 1:1 ratio just by giving it the height.
@Transvaal lion Is it mandatory to always know the size of the image? I had to add the width to the parent element, I thought the image would stretch out as a 1:1 ratio just by giving it the height.
Clown
No, the height and the width both need to be passed in unless you're doing a static import, because the height and the width are being used to determine the aspect ratio of the image in the first place.