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
  • 113
  • 3
  • 8

2 Answers2

1

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

Prashant
  • 65
  • 5
0

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
  • 307,417
  • 93
  • 525
  • 644