Mantener proporciones de imagen con varias resoluciones

txaskito · #1 (**permalink**) 15/06/2013, 09:52

Saludos a todos

Os comento mi duda. Tengo que colocar una imagen en el centro de una pagina, y que esta mantenga las proporciones del width y el height según la resolución de la pantalla, pero no se como hacerlo. Si le pongo el valor 100% en esos campos, me rellena toda la pantalla y me deforma la imagen.
¿Alguien me puede echar un cable? Este es el código sin darle el valor 100% a la imagen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<style type="text/css">
.centrar-imagen {
text-align: center;
}

html,body{
margin:0px;
height:100%;
}
</style>
</head>

<body>
<div id="contenedor" style="width:100%; height:100%;">
<div class="centrar-imagen"><img src="bilbao5.jpg" width="751" height="1151" /></div>
</div>

</body>
</html>

herzbazi · #2 (**permalink**) 15/06/2013, 11:29

yo te recomendaria poner un class a la imagen y darle estilo con width y heigth en porcentajes

pzin · #3 (**permalink**) 15/06/2013, 11:56

Especifica sólo un ancho o un alto, no los dos. Al especificar sólo uno de esos valores, el otro es calculado de forma automática.

twilvaro · #4 (**permalink**) 15/06/2013, 14:32

Código:

<style type="text/css">
.centrar-imagen {
text-align: center;
}

.centrar-imagen img {
    width: 100%; /* Siempre que la resolución de pantalla sea inferior que el ancho de la imagen, ocupará el 100% */
    max-width: 751px; /* Definimos el ancho máximo; el ancho de la imagen original, para evitar que siga ampliándose cuando la resolución de pantalla sea superior a éste */
    height: auto; /* Dejamos que el navegador muestre automáticamente el alto siempre proporcional al ancho de la imagen */
}

html,body{
margin:0px;
height:100%;
}
</style>

</head>

<body>
<div id="contenedor" style="width:100%; height:100%;">
<div class="centrar-imagen"><img src="bilbao5.jpg" /></div> <!-- Quitamos los estilos en línea y dejamos que trabajen los definidos en el style -->
</div>
</body>

Si quieres que en resoluciones inferiores no te ocupe el 100% del ancho de la pantalla, puedes 1) Cambiar el width de la imagen de 100% a 80% por ejemplo o 2) Añadirle padding al contenedor.

Un consejo: Deja de utilizar los estilos en línea. Lo mires por donde lo mires, entorpecen el trabajo.

Un saludo!

txaskito · #5 (**permalink**) 15/06/2013, 17:59

Gracias twilvaro. El codigo funciona, pero solo con safari, los otros navegadores ni caso. Me sigue apareciendo el alto original de la imagen y eso que he puesto
width: auto;
max-width: 751px;
height: 100%;

¿que puede estar fallando?

twilvaro · #6 (**permalink**) 15/06/2013, 18:36

Según veo, has tenido una confusión: Le has puesto el auto a width y el 100% a height. Es al revés. Revisa el código anterior.

Un saludo!

pzin · #7 (**permalink**) 16/06/2013, 04:17

Los valores "auto" no hace falta ponerlos. Qué manía siempre con incitar a estas cosas.

twilvaro · #8 (**permalink**) 16/06/2013, 04:55

No es incitar a que utilice el auto, es explicarle que es con auto como saca la proporción automáticamente al tener especificado el width.

Es cierto que podría haberle explicado que el valor auto es el predeterminado en la propiedad height, y que si no se indica lo toma igualmente por defecto, pero fíjate que esto es lo que le falta a la respuesta de ambos :)

pzin · #9 (**permalink**) 16/06/2013, 05:02

Cita:

Iniciado por twilvaro

pero fíjate que esto es lo que le falta a la respuesta de ambos :)

Cita:

Iniciado por pzin

Especifica sólo un ancho o un alto, no los dos. Al especificar sólo uno de esos valores, el otro es calculado de forma automática.

twilvaro · #10 (**permalink**) 16/06/2013, 05:20

jaja vamos a convertir el tema en quién dijo qué. Bueno, de acuerdo, hay que reconocer que tiene su miga.

Si le dices que al especificar sólo uno el otro es calculado de forma automática pero no le explicas por qué, pues está bien, pero la información es incompleta. Y lo es porque si está empezando no sabrá porqué.

A eso me refiero cuando digo que es lo que nos falta a ambos; aclarar que el auto es el valor predeterminado.

Un saludo!