0

I would like to force an image to match the dimensions of a parent div with no overflow.

https://play.tailwindcss.com/Ul6j6jBG5o?layout=horizontal

<div class="flex flex-col max-h-screen">
  <div class="flex flex-1">
    <div class="flex w-1/2 max-h-full">
      <img src="image.jpg" class="max-h-full object-cover overflow-hidden" />
    </div>
    <div class=""><p>Column Two</p></div>
  </div>
</div>

I would like for the image to match both the width and height of the flexbox (e.g. No scrolling) Is there a way to acheive this?

Tom Haines
  • 123
  • 3
  • 9

2 Answers2

1

use object-scale-down to scale down the image and fit in container or use object-fit

prashant
  • 210
  • 2
  • 11
-1

Add this to your code:

body > div > div {
  min-height: 0;
}

img {
  width: 100%;
  object-fit: cover;
}

Details here: Why don't flex items shrink past content size?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701