Image (.svg) doesn't extend over the entire width of the page

Question

I made an SVG image, but when I add it to a page and set the width value to 100%, it still doesn't extend over the entire width of the page, there is still small gaps that remain at the edges.

I tried to change value to 100vw but then the image is widther. When I fullscreen the page then everything is okay.

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;
}

Tomas Kuba · Accepted Answer · 2019-09-25T01:59:35.410

1

I suppose you are using Chrome. The problem could be then in the way (bug if you want) the Chrome processes .svg because FF seems to show it correctly without any margins.

I've found this answer: background-size:100% 100%; doesn't work properly in Chrome

Edit your .svg and add the property preserveAspectRatio="none" into the <svg> element.

edited Sep 25 '19 at 01:59

answered Sep 24 '19 at 21:28

Tomas Kuba

26
3

I checked and no element had set margins and the Inspector was showing that the image was extended to the entire width of the page. – keir Sep 24 '19 at 21:47
Please share the whole html code of that page. There must be some element that has either margin or padding set. – Tomas Kuba Sep 24 '19 at 22:02
Sorry, now I see - you have shared a .jpg image, not the .svg. Please share the .svg, too. – Tomas Kuba Sep 24 '19 at 22:08
Thanks. I think I've found the problem, look at my edited answer. – Tomas Kuba Sep 25 '19 at 02:02

Image (.svg) doesn't extend over the entire width of the page

1 Answers1