Image Overflowing Grid Cell-CodePudding

I have a very simple code with a grid and one image item within. The grid should be 70% of height of screen and I anticipated that the image is going to be contained within. For some reason, the image overflows.

The code:

<div className="grid grid-cols-2 w-full h-[70vh] items-center bg-[#19486A] border-2 border-red-400">
    <img src={homeImage_desktop} alt='' className='ml-auto' />
</div>

Result:

I can resize the image manually to 70vh but I'd rather have the image resize itself to fit the parent automatically.

CodePudding user response：

Set the image to 100% width of its parent element

 <div className="grid grid-cols-2 w-full h-[70vh] items-center bg-[#19486A] border-2    border-red-400">
     <img className="w-full" src={homeImage_desktop} alt='' className='ml-auto' />
 </div>

CodePudding user response：

Add max-h-full max-w-full min-w-0 min-h-0

<script src="https://cdn.tailwindcss.com"></script>

<div >
  <img  src="https://images.unsplash.com/photo-1643131747793-1b103cc66c6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1036&q=80" alt='' />
</div>