How to resize the ClipPath area of SVG?

I have such code:

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen;  
  overflow: hidden;
}

.clipped-img {
  clip-path: url('#header-clip-svg');
}

<div class="img-container">

  <!--clipping SVG-->
  <svg height="0" width="0">
    <defs>
      <clipPath id="header-clip-svg">
        <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path>
      </clipPath>
    </defs>
  </svg>

  <!-- clipped image-->
  <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
  
</div>

I want to increase the clipping shape dimensions so it will be of the width of colored green area. Is there a way to do achieve this?

Solution

Update 2025

Now using the new shape() function of clip-path you can easily have a responsive shape. All you have to do is to transform your SVG into a CSS one and it's done. I created a generator for this: https://css-generators.com/svg-to-css/

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen; 
  margin:5px;
}

.clipped-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 1.233;
  clip-path: shape(from 97.54% 10.91%,curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,close);
}

<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container" style="width:500px;">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container" style="width:150px;">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

You can apply the SVG as a mask and easily adjust its size and position (like you can with background-image). Simply make sure you set the correct value for the viewbox:

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen; 
  margin:5px;
}

.clipped-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) center/contain no-repeat;
}

<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container" style="width:500px;">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container" style="width:150px;">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>