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

扬·米鲁斯

请帮忙。我需要在 div 中放置一个 svg，在标题旁边。它是一个矩形，有点像企业设计元素。代码：

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

它应该看起来像：

头条 ▮

但是在这种情况下

包裹式
标题

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

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

svg 会拉伸到合适的大小，但会与标题重叠。有任何想法吗？谢谢！

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

保罗·勒博

最简单的选择可能是使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。