0

Estaba utilizando una imagen con formato SVG para el logo de una página web. Al principio todo iba correctamente y la imagen se mostraba, pero luego esta desapareció. ¿Cómo puedo solucionar esto?

    <body>
        <header>
            <nav id="nav-mobile">
                <span class="material-symbols-outlined">menu</span>
                <div class="container-logo">
                    <a href="index.html">
                        <img src="resources/logo.svg" alt="logo">
                    </a>
                </div>

Leí por ahí que era un problema de display o del escalado de la imagen, a lo que intenté usar css para poner todas las cajas del mismo tamaño; pero aún así la imagen seguía en el mismo estado.

* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0; 
}

.material-symbols-outlined {
    color: black; 
}

.container-logo {
    display: flex;
    width: 20%;
}


.container-logo a {
    display: flex;
    width: auto;
    height: auto;
}

.container-logo a img {
    width: auto;
    height: auto;
}

¿Alguna idea de lo que pueda hacer?

1 respuesta 1

0

El problema está en que utilizas flexbox sin necesidad y eso hace que el enlace dentro de .container-logo, a efectos prácticos, tenga unas dimensiones de cero píxels. Eliminando el display: flex; de dicha clase, ya funciona. De hecho, puedes prescindir del código de .container-logo a y .container-logo a img y verás que también funciona igualmente.

Te recomendaría que, tratándose de un logo, definieses unas dimensiones fijas para la etiqueta img.

* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0; 
}

.container-logo {
    /*display: flex;*/ /* Esta línea es la que genera el problema */
    width: 20%;
}

/* Estos dos estilos de aquí abajo también son prescindibles al completo */

.container-logo a {
    display: flex;
    width: auto;
    height: auto;
}

.container-logo a img {
    width: auto;
    height: auto;
}
<div class="container-logo">
  <a href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg" alt="logo">
  </a>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.