2

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Patris
  • 75
  • 1
  • 6
  • @cgvoller, you can test that yourself in a few seconds by copying the snippet and trying it out. Just click the button. – isherwood Nov 08 '22 at 14:10

1 Answers1

1

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>
Breezer
  • 10,410
  • 6
  • 29
  • 50
  • Thank you! Making it a background image was not an option (I didn't specify that though; my fault), but this alternative works. – Patris Nov 08 '22 at 18:38