[FIXED] How can I set image height to be equal to text height?

Issue

I'm trying to make the image on the left have the same height as the text on the right.

At the moment, the image scales correctly as long as the window width is reduced, such that the image grows alongside the text. But if there aren't enough lines in the text, the image height remains at 150px, and I wish for it to always be the same height as the text.

Is it possible to do this with no JS?

.container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
}
img {
  height: 100%;
}

<div class="container">
  <div class="col">
    <img src="https://via.placeholder.com/150" alt="" />
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Solution

Well you basically want it to behave like a background image and thats what you should do but if you cant for some reason, give the image an absolute position, and give the container a relative position and it should solve your problem, you could also change the image's behaviour with object-fit etc

.container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  position:relative;
}
img {
  height: 100%;
  position:absolute;
}

<div class="container">
  <div class="col">
    <img src="https://via.placeholder.com/150" alt="" />
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

Answered By - Breezer

Answer Checked By - Marie Seifert (PHPFixing Admin)