html – 拉伸SVG以适应其父级的100％高度和宽度

概述(已解决 – 通过codepen链接查看解决方案) 我正在尝试使用SVG图像作为背景,它将始终延伸到其父div的100％. 已经尝试过： >用作CSS背景图像并设置背景大小：100％100％. >将绝对值设为父div并设置高度：100％. > preserveAspectRatio =“xMaxYMax”. >即使我手动更改viewBox它也不起作用. >尝试了我在这里找到的所有相关问题 – St (已解决 – 通过codepen链接查看解决方案)
我正在尝试使用SVG图像作为背景,它将始终延伸到其父div的100％.
已经尝试过：

>用作CSS背景图像并设置背景大小：100％100％.
>将绝对值设为父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增长时,我需要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 >  <svg ID="small_bubble"  xmlns="http://www.w3.org/2000/svg" vIEwBox="0 0 311.92 272.85" preserveAspectRatio="xMaxYMax">      <path  preserveAspectRatio="xMaxYMax" d="M301.52,1.57,8.37,19.53A7.87,7.87,1.5,27.34V214.76a7.89,7.89,7.12,7.85l46.67,4.53-7.14,42.78,63-37.35,190.58,18.51a7.88,7.88,8.65-7.85V9.38A7.88,301.52,1.57Z"/>     </svg></div>

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

解决方法 如果您对另一种选择开放,您可以使用纯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 ><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 ></span></div><div ><p>orem ipsum dolor sit amet,in eleifend nisl dAPIbus.</p><span ></span></div><div  ><p>orem ipsum dolor sit amet,in eleifend nisl dAPIbus.</p><span ></span></div><div  ><p>orem ipsum dolor sit amet,accumsan quis risus.</p><span ></span></div>

总结

以上是内存溢出为你收集整理的html – 拉伸SVG以适应其父级的100％高度和宽度全部内容，希望文章能够帮你解决html – 拉伸SVG以适应其父级的100％高度和宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。