html - 拉伸(stretch) SVG 以适应其父级的 100% 高度和宽度

Question

(已解决 - 通过 codepen 链接查看解决方案) 我正在尝试使用 SVG 图像作为背景，它始终会拉伸(stretch)到其父 div 的 100%。 已经尝试过:

• 用作 CSS 背景图像并设置背景大小:100% 100%。
• 将 absolute 设置为父 div 并设置高度:100%。
• preserveAspectRatio="xMaxYMax"。
• 即使我手动更改 viewBox，它也不起作用。
• 尝试了我在这里找到的所有相关问题 - Stretch SVG background image? , Automatically scale an SVG to its parent , Fit/Stretch SVG to div background without reescaling

要更好地了解我想要什么，请访问此链接: http://185.127.16.178/~amen/%D7%90%D7%95%D7%91%D7%97%D7%A0%D7%AA-%D7%9C%D7%90%D7%97%D7%A8%D7%95%D7%A0%D7%94/
在那个绿色气泡中，文本的长度可以变化，所以我需要在添加更多文本并且 div 增长时拉伸(stretch) SVG。

我还造了一支小笔——

.svg-container {
  height: 400px;
  width: 200px;
  border: 1px solid red;
  position: relative;
}

#small_bubble {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.cls-1 {
  fill: transparent;
  stroke: green;
  stroke-miterlimit: 3;
  stroke-width: 3px;
}

.e-poa {
  position: absolute;
}

e-por {
  position: relative;
}

<div class="svg-container">
  <svg id="small_bubble" class="e-poa" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.92 272.85" preserveAspectRatio="xMaxYMax">
      <path class="cls-1" preserveAspectRatio="xMaxYMax" d="M301.52,1.57,8.37,19.53A7.87,7.87,0,0,0,1.5,27.34V214.76a7.89,7.89,0,0,0,7.12,7.85l46.67,4.53-7.14,42.78,63-37.35,190.58,18.51a7.88,7.88,0,0,0,8.65-7.85V9.38A7.88,7.88,0,0,0,301.52,1.57Z"/>
     </svg>
</div>

解决方案可以在这里看到(由 - @Furkan Poyraz 解决): https://codepen.io/ncamaa/pen/JZzeQM

Answer 1

如果您对另一种选择持开放态度，则可以使用纯 CSS 创建形状。它不像 SVG 那样整洁，但它会响应:

* {
 box-sizing:border-box;
}

.box {
 margin:40px;
 padding:0 10px;
 max-width:200px;
 display:inline-block;
 vertical-align:top;
 border-right:2px solid green;
 border-left:2px solid green;
 position:relative;
}
.box:before {
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:calc(100% - 40px);
  height:50px;
  border:2px solid green;
  border-bottom:0;
  border-radius:5px 5px 0 0;
  transform:skewY(-5deg);
  transform-origin:left bottom;
}
.box .b {
  position:absolute;
  left:-2px;
  right:-2px;
  top:calc(100% - 40px);
  height:50px;
  border:2px solid green;
  border-top:0;
  border-radius:0 0 5px 5px;
  transform:skewY(5deg);
  transform-origin:left top;
}
.box .b:before {
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  top:calc(100% - 15px);
  left:40px;
  border-left:2px solid green;
  border-bottom:2px solid green;
  transform:skewY(-45deg);
}
.box .b:after {
  content:"";
  position:absolute;
  width:27px;
  height:4px;
  top:calc(100% - 1px);
  background:#fff;
  left:42px;
}
.box p {
  margin:0;
}

<div class="box">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus. Ut viverra felis nec pretium accumsan. Sed eu ante id augue placerat pellentesque eget at nibh. Quisque pharetra nisi et suscipit eleifend</p>
<span class="b"></span>
</div>
<div class="box">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.</p>
<span class="b"></span>
</div>
<div class="box" style="max-width:300px;">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.</p>
<span class="b"></span>
</div>
<div class="box" style="max-width:350px;">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus.</p>
<span class="b"></span>
</div>