CODEWITHSUNDEEP
htmlcsssvg
Nadav
Nadav

Reputation: 1819

Stretch SVG to fit 100% height and width of its parent

(Solved - see solution via codepen link) I am trying to use an SVG image as a background that will always stretch to 100% of its parent div. Already tried:

To get better understanding of what I want, please visit this link: 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/
In that green bubble, the text's length can vary, so I need the SVG to stretch when more text is added and the div is growing.

I also created a small pen - 

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

Solution can be seen here (Solved by - @Furkan Poyraz): https://codepen.io/ncamaa/pen/JZzeQM

enter image description here

Upvotes: 5

Views: 1418

Answers (1)

Temani Afif
Temani Afif

Reputation: 272608

If you are open to another alternative you can create the shape with pure CSS. It won't be neat as the SVG one but it will be responsive:

* {
 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>

Upvotes: 5

Related Questions