Hice una imagen SVG, pero cuando la agrego a una página y establezco el valor de ancho en 100%, todavía no se extiende por todo el ancho de la página, todavía quedan pequeños espacios en los bordes.

Traté de cambiar el valor a 100vw pero luego la imagen es más amplia. Cuando hago la pantalla completa de la página, todo está bien.

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;
}
0
keir 25 sep. 2019 a las 00:03

1 respuesta

La mejor respuesta

Supongo que estás usando Chrome. El problema podría estar en la forma (error si lo desea) de los procesos de Chrome .svg porque FF parece mostrarlo correctamente sin márgenes.

Encontré esta respuesta: tamaño de fondo: 100% 100%; no funciona correctamente en Chrome

Edite su .svg y agregue la propiedad preserveAspectRatio="none" en el elemento <svg>.

0
Tomas Kuba 25 sep. 2019 a las 01:59