css - SVG 差距 : wont completely fill the outer container

Question

我的 svg 左侧有一个小缝隙，我一辈子都无法修复它。请参阅下图了解我所指的内容。在左侧，您可以稍微看到图像。

我在 Chrome 和 Firefox 上注意到这个问题。知道问题可能是什么吗？

.aw-carousel .thumbnail {
	padding: 0;
	border-radius: 5px;
	height: 24rem;
	overflow: hidden;
	position: relative;

	background-size: cover; 
	background-position: center center; 
	background-repeat: no-repeat;

	-webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:    0px 10px 15px 0px rgba(0, 0, 0, 0.25);
	box-shadow:         0px 10px 15px 0px rgba(0, 0, 0, 0.25);
}

.aw-carousel .thumbnail-inner {
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
}

.aw-carousel .thumbnail-svg {
	position: absolute;
	top: 0px;
	width: 100%;
}

.aw-carousel .thumbnail-content {
	padding: 1rem;
	text-align: left;
	/*background-color: #fff;*/
	position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="aw-carousel row">
<div class="aw-carousel-cell-third col-lg-4 col-md-6 col-sm-6 col-xs-12">
  <div class="thumbnail" style="background-image: url(http://www.africaneedslions.com//fsdocuments/Social/FeaturedImages/e1d76099-362a-4d0a-825b-7f4dba2ef947/pimage_e1d76099-362a-4d0a-825b-7f4dba2ef947.jpg?v=20180313080756);">
    <div class="thumbnail-inner">
      <div class="thumbnail-svg">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214.37 379.6" preserveAspectRatio="none"><title>wave</title><path d="M214.37,379.6H0V5.33S22.87,0,42.67,0C91.37,0,96,7.6,141,27.3c12.5,5.5,28.3,10.3,43.7,10,23.2-.3,29.7-6.4,29.7-6.4Z" style="fill:#fff"/></svg>
      </div>
      <div class="thumbnail-content">
        <h3 class="thumbnail-title text-uppercase">Foo</h3>
        <p>Bar</p>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

但仍然在您的代码中更新此类并查看...

.aw-carousel .thumbnail {
    padding: 0;
    border-radius: 5px;
    height: 24rem;
    overflow: hidden;
    position: relative;

    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;

    -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    0px 10px 15px 0px rgba(0, 0, 0, 0.25);
    box-shadow:         0px 10px 15px 0px rgba(0, 0, 0, 0.25);
    overflow:hidden;
}

.aw-carousel .thumbnail-svg {
    position: absolute;
    top: 0px;
    left:-2px;
    width: 101%;
}