时间戳

首页 > 解决方案 > 将元素缩放到父高度，保持其比例，但保持其相对位置

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

问题描述

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

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

它应该看起来像：

头条▮</p>

但在这种情况下

包装
标题

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

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

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

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

标签： csssvg

解决方案

最简单的选择可能是使用display: flex和使用background-imageSVG。

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

推荐阅读