Масштабируйте элемент по отношению к родительской высоте, сохраняя его соотношение, но сохраняя его положение относительно

Question

Пожалуйста, помогите. Мне нужно разместить svg внутри div, рядом с заголовком. Это прямоугольник, своего рода элемент корпоративного дизайна. Код:

<div id="container">
   <h1>HEADLINE</h1>
   <img src="/my/rectangle.svg">
</div>

Он должен выглядеть следующим образом:

HEADLINE ▮

Но в случае

WRAPPED
HEADLINE

прямоугольник должен увеличиваться, растягиваться на две линии, сохраняя соотношение сторон. Итак, моя проблема:
Я не могу установить высоту #container, потому что я не знаю, сколько строк текста будет в нем. Когда я сделаю, как предложено, здесь , что означает, скажем,

#container {position:relative}
#container img {position:absolute; height:100%}

, svg растянется до нужного размера, но будет совпадать с заголовком. Любые идеи? Спасибо!

Редактировать: Может быть, это не имеет ничего общего с SVG. Может быть любой дочерний элемент, который должен быть масштабирован до родительской ширины. Проблема в том, что один аспект проблемы требует, чтобы он был относительным, а другой - абсолютным.

Answer 1

Самый простой вариант - использовать display: flex и background-image для SVG.

.heading {
  display: flex;
}

.heading h1 {
  margin: 0;
}

.heading .img {
  flex: 1 1 auto;
  background: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/obama.svg) no-repeat;
}

<div class="heading">
  <h1>HEADLINE</h1>
  <div class="img"></div>
</div>

<br/>
<br/>
<br/>

<div class="heading">
  <h1>WRAPPED<br/>HEADLINE</h1>
  <div class="img"></div>
</div>