html - 图像 (.svg) 没有延伸到页面的整个宽度

Question

我制作了一个 SVG 图像，但是当我将它添加到页面并将宽度值设置为 100% 时，它仍然没有延伸到页面的整个宽度，边缘处仍然存在小间隙.

我尝试将值更改为 100vw，但图像变宽了。当我全屏显示页面时，一切正常。

IMG

HTML:

<footer>
    <div class="footer-top-shape">
        <img class="footer-top-shape-img" src="./svgs/footershape26.svg" alt="Footer shape">
    </div>
    <div class="footer-container">
        <div class="footer-content">

CSS:

footer{
    height: auto;
    width: 100%;
    background-color: #0a2233;
}

.footer-top-shape-img{
    width: 100%;
    height: auto;
}

.footer-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

Answer 1

我想您正在使用 Chrome。问题可能出在 Chrome 处理 .svg 的方式上(如果你愿意的话，bug)，因为 FF 似乎可以正确显示它而没有任何边距。

我找到了这个答案:background-size:100% 100%; doesn't work properly in Chrome

编辑您的 .svg 并添加属性 preserveAspectRatio="none"进入<svg>元素。