0

https://jsfiddle.net/nr7b2qtk/1/

HTML:

<div class="flex">
  <div class="image">
    <img src="https://via.placeholder.com/150">
  </div>
  <div class="text">
    something
  </div>
</div>

CSS:

.flex{
  display:flex;
  align-items:center
}
.text{
  font-size:40px;
  line-height:1.5
  margin-left:auto;
  background:red;color:white
}

In the above code, I want the image size to scale down to match the height of the text element (which in this case is 45px), besides manually setting the image's width/height, is there any other way to do this in pure CSS?

shenkwen
  • 3,536
  • 5
  • 45
  • 85
  • I think someone else already [answered it](https://stackoverflow.com/questions/12285608/automatically-scale-an-image-to-match-text-height). – Rick van den Broek Nov 13 '20 at 17:18
  • ... `font-size:40px` X `line-height:1.5` = 60px . looks like this is the height you want your image to be ;) – G-Cyrillus Nov 13 '20 at 17:36

0 Answers0