Question

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

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

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的方式上（如果需要的话，就是错误），因为FF似乎可以正确显示它而没有任何空白。

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

编辑您的.svg，并将属性preserveAspectRatio="none"添加到<svg>元素中。

图片（.svg）不在页面的整个宽度上延伸

1 个答案: