How can I set image height to be equal to text height?-CodePudding

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 >
  <div >
    <img src="https://via.placeholder.com/150" alt="" />
  </div>
  <div >
    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>

CodePudding user response：

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