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