Javascript 如何使用CSS将SVG图像正确附加到Bootstrap 4旋转木马

我有一个bootstrap4carousel，它工作得很好，我正试图用CSS在它的底部添加一个波浪（png）效果。它可以工作，但是它不可靠，无法适应旋转木马的宽度，从图像中可以看出它没有占据整个宽度。如何让波浪可靠地填充宽度（同时响应）

在我学习的过程中，我学到了一些CSS，但是有了它，我就可以摆弄它了，因为逻辑不再流行了。我以前将宽度设置为100%以上，但它仍然不可靠，即使是当前的高度和宽度，在渲染之前实际上也是波浪的倾斜视图。我在下面附上了一份.svg

HTML

<div id="itCarouselControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner carousel-wave">
    <div class="carousel-item active">
      <img src="./img/carousel/image001.min.jpg" alt="...">
    </div>
    <a class="carousel-control-prev" href="#itCarouselControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#itCarouselControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

我没有足够的点数来发布图片，所以可以找到它正在做的事情的副本

这是一份

我想让图像/波浪填充父对象的宽度，并使其在响应性设计中工作。还是需要JavaScript来解决问题

或者作为另一种方法，my.svg是否太大？它是1920像素x 73像素。让它变得更小，让它伸展会有帮助吗

谢谢你

结果是SVG中的

元素与viewbox的左右边缘不齐平。这就是为什么将伪元素覆盖在其父元素上时，伪元素的左右两侧都有空格的原因：

如果修复SVG不是问题，则需要人为增加伪元素的宽度，以便隐藏空的左边缘和右边缘：

.carousel wave{
位置：相对位置；
/*演示样式*/
背景色：#000；
颜色：#fff；
宽度：100%；
高度：150像素；
边缘底部：10px；
}
.carousel wave：：之前{
显示：块；
框大小：边框框；
位置：绝对位置；
内容：''；
底部：0；
左：0；
宽度：100%；
高度：40px；
z指数：99；
背景色：红色；
背景图像：url（'data:image/svg+xml；utf8'）；
背景尺寸：封面；
背景重复：无重复；
}
.旋转木马波-固定{
溢出：隐藏；
}
.carousel wave--修复：：之前{
宽度：钙（110%）；
左-5%；
}

原件
修复了

@MattFryer我已经检查了.svg并编辑了关于使用>100%的内容：）@MattFryer我已经尝试在我的引导项目中将wave添加到过多个组件中，结果基本相同。我认为，这个问题与我没有正确理解伪元素有关。SVG的左右边距似乎都是空白。您必须将它们裁剪出来，以便它们与波路径的边缘齐平。您建议我使用什么来编辑我的SVG？我一直在使用Illustrator，但无法填补左右空白：（@simonB难道你不能缩小艺术板的尺寸，让袋子的边缘贴到侧面吗？我本来是这样做的，但现在我想我的“模糊”（不是正确的词）设置一定太高了。我计划今天下午设置艺术板和对象宽度的绝对值（而不是依赖GUI）。

.carousel-wave {
  position: relative;
}
.carousel-wave:before {
  display: block;
  box-sizing: border-box;
  position: absolute;
  content: '';                    
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8%;
  z-index: 99;
  background: url('../img/carousel/carousel-wave-lower.svg');
  background-size: cover;
  background-repeat: no-repeat;
}