0

I have a CSS grid with two columns. The first column contains text and the second contains a image. I would like the grid row height to fit the content of the text in the first column. The image in the second column should be resized so that it does not take up more height than the text.

Right now as you can see in the snippet, the image expands higher than the text.

.wrapper {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns:  2fr 1fr;
    grid-template-rows:  auto;
}


.wrapper > .image > img {
    object-fit: contain;
    height: 100%;
    width: 100%;
    margin: auto auto;
}
<div class="wrapper">

  <div class="text"><p>asdas</p><p>rethtyhyh</p><p>uyiouu768uy</p></div>
  <div class="image"><img src="https://cdn.pixabay.com/photo/2017/02/01/00/29/lone-star-2028578_960_720.png" ></div>
</div>
Stefan Rasmusson
  • 5,311
  • 3
  • 20
  • 47

0 Answers0