0

Estoy haciendo el responsive de una web y dentro del header coloque un gif como logo en una etiqueta img. El diseño de escritorio esta bien, pero el problema es que no puedo redimensionar la imagen para la version responsive. Al achicarse la pantalla la imagen obviamente se desforma.

Si cambio el width a uno mas chico y dejo el height: auto, no cambia de tamaño y sigue la imagen desformada. Tampoco pasa nada si agrego object-fit: contain, object-position: center y max-width: 100%

Tambien probe poner la etiqueta img dentro de un div. La imagen no se desforma pero se queda super chiquita en el margen superior izquierdo y si intento cambiar el width no cambia.

Dejo el codigo html y css mas abajo. Muchas gracias!!

<header>
     <img class="logo" src="css\images\logo.gif"/>
      <nav class="menu">
       <ul>
        <li><a href="#">Nosotros</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Pacientes</a></li>
        <li><a href="#">Noticias</a></li>
       </ul> 
      </nav> 
      <button class="bar-button">
        <input type="checkbox" id="icon-bar">
          <label for="icon-bar"><img src= "css\images\menu.png">Menu</label>
        </input>  
     </button>
</header>

Codigo css

Escritorio

header{
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0%;
    padding: 0.5em 0 0.5em 2.5em;
    background-color:rgb(255, 255, 255);
    box-shadow: 0 2px 15px rgb(0, 0, 0);
    border-bottom: 1 px solid rgb(1, 39, 75);
}

.logo{
    width: 50px;
    height: auto;
 }

Responsive

 @media (max-width:768px){

 .logo{
    max-width: 100%;
    width: 30px;
    height: auto;
    object-fit: contain;
    object-position: center;
  }  

1 respuesta 1

0

para hacer un gif/imagen responsive tienes que formularlo de una forma distinta ya que necesita un "contenedor" al que aplicarle el width, en el caso del ejemplo se llama box, te dejo un ejemplo para saber si es lo que necesitas.

Lo que estoy haciendo es asegurarme con width y max-width que va a ocupar todo el espacio disponible. Para la altura de la imagen, puedes utilizar height: 100% para asegurarte que ocupe el 100% de la altura del bloque que lo contiene o height: auto para dejar al navegador que calcule de forma automática la altura para el elemento especificado.

header{
        position: fixed;
        z-index: 1000;
        width: 100%;
        top: 0%;
        padding: 0.5em 0 0.5em 2.5em;
        background-color:rgb(255, 255, 255);
        box-shadow: 0 2px 15px rgb(0, 0, 0);
        border-bottom: 1 px solid rgb(1, 39, 75);
    }

    box {
      width: auto;
    }

    .box img{
      max-width: 300px; /* Cambiar esta propiedad para adaptar al tamaño deseado*/
      width: 100%;
      height: auto;
      margin: 0 auto;
     }
<header>
          <div class="box">
            <img src="https://media.giphy.com/media/ZqlvCTNHpqrio/giphy.gif"/>
          </div>
          <nav class="menu">
           <ul>
            <li><a href="#">Nosotros</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Pacientes</a></li>
            <li><a href="#">Noticias</a></li>
           </ul> 
          </nav> 
          <button class="bar-button">
            <input type="checkbox" id="icon-bar">
              <label for="icon-bar"><img src="">Menu</label>
            </input>  
         </button>
    </header>

2
  • Muchisimas gracias!! funciono!! :) Commented el 16 feb. 2022 a las 22:14
  • Gracias a ti, me alegro mucho!
    – Tomas
    Commented el 17 feb. 2022 a las 15:12

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.