<img> se me deforma

[ragutierrez]

Estoy en mis primeros pasos, y adaptando un trabajo de html 4 a responsive design, y me encuentro con la imagen del logo que esta en el header
css
img {a max-width: 100%} la Dimensión real es 290 x 130 px

Que se deforma a pantalla completa en monitor.
¿Como hago para mantener sus dimensiones sin perder el responsive design?

He visto por ahi es posible a través de @media queries.
Me podrian dar algun ejemplo o solucion.

[jonni09lo]

Pues sin ver el código hml está bien complicado, pero si se te deforma lo más seguro es porque estas colocando un alto fijo

Prueba:

Código CSS:

img {
    max-width: 100%
    height:auto;
}
 

Si esto no corrige tu error por favor postea el html

Saludos

[GusleonP]

Hola...para que la imagen no sea mas grande que su ancho real y se adapte al 100% cuado la pantalla sea mas chica has esto:

Código CSS:

img{
max-width:290px; /*ancho de tu imagen*/
width:100% /*tu imagen se adapta sin exceder el ancho de la imagen*/
}
 

Espero te sirva.

[jonni09lo]

Iniciado por GusleonP

Hola...para que la imagen no sea mas grande que su ancho real y se adapte al 100% cuado la pantalla sea mas chica has esto:

Código CSS:

img{
max-width:290px; /*ancho de tu imagen*/
width:100% /*tu imagen se adapta sin exceder el ancho de la imagen*/
}
 

Espero te sirva.

Estaría bien pero el problema es que no solo el ancho puede deformarse, se especificas un width con porcentajes debes de colocar un height auto ya que muchas veces se colocan altos fijos. Así que tu solución funcionaría a medias en ese caso.

Saludos

[EmpireFX]

Sobre las media queries... segun el alto o largo especificamos las propiedades css.

Código CSS:

/*  Si la pantalla no es mayor a 600(px) de largo, entonses cambiar el color del background... */
@media (max-width: 600px) {
        .background {
                background-color: red;
        }
 }