将元素缩放到父高度，保持其比率，但保持其位置相对

Question

请帮忙。 我需要将 svg 放置在标题旁边的div 内。这是一个矩形，有点像企业设计元素。法典：

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

它应如下所示：

标题 ▮

但在

被撕裂的
标题

矩形应向上缩放，拉伸两条线，保持其纵横比。 所以我的问题是：
我无法设置 #container 的高度，因为我不知道里面会有多少行文字。当我按照这里的建议做时，意思是说

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

SVG 将拉伸到正确的大小，但它将与标题重叠。 有什么想法吗？谢谢！

编辑：也许这与svg无关。可以是需要缩放到父宽度的任何子元素。挑战在于，问题的一个方面要求它是相对的，而另一个方面要求它是绝对的。

Answer 1

最简单的选择可能是使用display: flex并对 SVG 使用background-image。

.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>