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

【问题标题】：Scale element to parent height, keeping its ratio, but keep its position relative将元素缩放到父高度，保持其比例，但保持其相对位置
【发布时间】：2020-02-12 02:59:13
【问题描述】：

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

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

它应该看起来像：

标题▮

但是在

的情况下

包装
标题

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

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

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

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

【问题讨论】：

...是的，我可以做js；嗅探标题的高度，为#container 设置高度。可能比在这里发布问题要快；）但是用 js 解决这样的问题通常不会让你感觉良好。
还可以考虑使用实际 SVG 元素而不是图像。
嗨 Pauli_D，使用内联 svg 如何帮助我解决子元素必须是绝对的才能不干扰其父元素的高度，但必须是相对的才能与他的兄弟姐妹相处的挑战?

标签： css svg

【解决方案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>

【讨论】：

嗨，保罗，非常感谢。使用 BG no-repeat 是个好主意。老实说，如果不为 .heading .img 设置宽度，我不知道您的示例是如何工作的。
我需要设置一个宽度，否则
将是 0x0 px。所以我选择了一个与矩形一样宽的宽度，双标题可能会得到，而单标题背景矩形只填充左侧部分。这看起来没问题，只要
的右侧没有任何内容，因为
的“未填充”部分仍然存在并将其他内容推送到右侧。出色地。我希望我的客户不会注意到。谢谢！
你不使用display:flex吗？
在
?是的，我是