Image Component Stretches in @nextui-org/react, Ignoring Parent Element Constraints

[FZ1010]

I've encountered an issue when using the Image component where the image stretches and doesn't properly fit within the parent element. This behavior differs from using a native element, which works as expected.

Steps to reproduce:

1. Using a native tag:

"use client";

import React from 'react';
import { Card, CardBody } from "@nextui-org/card";

const Test1 = () => {
    return (
        <Card>
            <CardBody>
                <img
                    width={2000}
                    height={2000}
                    alt="test1"
                    src="https://tailwindui.com/img/ecommerce-images/product-page-03-product-01.jpg"
                />
            </CardBody>
        </Card>
    );
};

export default Test1;

This renders the image perfectly, fitting inside the parent element with no issues.

2. Replacing the with the Image component from @nextui-org/react:

"use client";

import React from 'react';
import { Card, CardBody } from "@nextui-org/card";
import { Image } from "@nextui-org/react";

const Test2 = () => {
    return (
        <Card>
            <CardBody>
                <Image
                    width={2000}
                    height={2000}
                    alt="test2"
                    src="https://tailwindui.com/img/ecommerce-images/product-page-03-product-01.jpg"
                />
            </CardBody>
        </Card>
    );
};

export default Test2;

In this case, the image stretches and doesn't respect the constraints of the parent element, causing a significant layout issue. Adding styling classes such as w-full or h-auto does not resolve the problem.

Expected behavior: The Image component should behave similarly to a native element, scaling correctly within its container.

2024-09-26.21-11-55.online-video-cutter.com.mp4

[wingkwong]

let's track here instead of creating everywhere.

[FZ1010]

let's track here instead of creating everywhere.

I wasn't sure if it was a bug or not. Sorry about that.