How to make the height of an image equal to the height of the text next to it?

V

VctorIAN2021-06-21 18:39:10

css

VctorIAN, 2021-06-21 18:39:10

Hello, I want the height of the image to always be equal to the height of the text, I'm assuming that the height of the div depends on the height of the content and I'm trying to set this height to the picture by specifying height: 100%; but it doesn't work - how can i fix the problem
example

<!DOCTYPE html>

<body>
  <div class="container">
    <svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#2329D6" stroke-width="1" color="#2329D6">
      <path
        d="M16 12C15.3333333 12.6666667 15 14 15 16L15 17 9 17 9 16C9 14 8.66666667 12.6666667 8 12 5.6739597 9.6739597 5.41421356 6.10050506 7.75735931 3.75735931 10.1005051 1.41421356 13.8994949 1.41421356 16.2426407 3.75735931 18.5857864 6.10050506 18.4068484 9.59315157 16 12zM10 21L14 21" />
    </svg>
    <div class="text">
      <div class="text__first">First</div>
      <div class="text__second">second</div>
    </div>
  </div>
</body>
<style>
  .container {
    display: flex;
    flex-direction: row;
    font-size: 20vmin;

  }

  .text {
    background: green;
  }

  .text__first {
    font-size: 20vmin;
  }

  .text__second {
    font-size: 10vmin;
  }

  svg {
    height: 100%;
  }
</style>

</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

K

kryamk, 2021-06-21
@VctorIAN

Usually, if you need a picture with a text height, then I do it using absolute. Some kind of width is apparently always needed.
svg respects the aspect ratio, but you can avoid this by setting the preserveAspectRatio="none" attribute By the
way , the link is curious, I haven't read it myself, but they seem to be saying
snippet