Image Overflowing from the container

hey folks this is my html

<section className="flex flex-wrap gap-8 p-36">
            {data.map((item, index) => (
                <div key={index} className="grow shrink basis-1/3 h-80">
                    <img src={item.feature_image} alt="" className="h-full w-full object-cover object-center />
                    <p>{item.title}</p>
                </div>
            ))}
        </section>

<section className="flex flex-wrap gap-8 p-36">
            {data.map((item, index) => (
                <div key={index} className="grow shrink basis-1/3 h-80">
                    <img src={item.feature_image} alt="" className="h-full w-full object-cover object-center />
                    <p>{item.title}</p>
                </div>
            ))}
        </section>

I have set this css for all the images to make them responsive

max-width: 100%
height: auto;

max-width: 100%
height: auto;

but still the image is overflowing from the container I have attached the image

3 Replies

Unknown User•2y ago

Message Not Public

Wolle•2y ago

Maybe you want to add max-height: 100%?

Aditya Kirad•2y ago

Solved the issue on my own

Gaming

Programming

Image Overflowing from the container