Foros del Web » Creando para Internet » CSS »

Mantener proporciones de imagen con varias resoluciones

Estas en el tema de Mantener proporciones de imagen con varias resoluciones en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/06/2013, 09:52
 
Fecha de Ingreso: junio-2013
Mensajes: 3
Antigüedad: 7 años, 10 meses
Puntos: 0
Mantener proporciones de imagen con varias resoluciones

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>
  #2 (permalink)  
Antiguo 15/06/2013, 11:29
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 9 años, 2 meses
Puntos: 36
Respuesta: Mantener proporciones de imagen con varias resoluciones

yo te recomendaria poner un class a la imagen y darle estilo con width y heigth en porcentajes
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #3 (permalink)  
Antiguo 15/06/2013, 11:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 9 meses
Puntos: 2113
Respuesta: Mantener proporciones de imagen con varias resoluciones

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.
  #4 (permalink)  
Antiguo 15/06/2013, 14:32
Avatar de twilvaro  
Fecha de Ingreso: febrero-2012
Ubicación: La Línea (Cádiz)
Mensajes: 47
Antigüedad: 9 años, 2 meses
Puntos: 5
Respuesta: Mantener proporciones de imagen con varias resoluciones

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!
  #5 (permalink)  
Antiguo 15/06/2013, 17:59
 
Fecha de Ingreso: junio-2013
Mensajes: 3
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Mantener proporciones de imagen con varias resoluciones

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?
  #6 (permalink)  
Antiguo 15/06/2013, 18:36
Avatar de twilvaro  
Fecha de Ingreso: febrero-2012
Ubicación: La Línea (Cádiz)
Mensajes: 47
Antigüedad: 9 años, 2 meses
Puntos: 5
Respuesta: Mantener proporciones de imagen con varias resoluciones

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!
  #7 (permalink)  
Antiguo 16/06/2013, 04:17
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 9 meses
Puntos: 2113
Respuesta: Mantener proporciones de imagen con varias resoluciones

Los valores "auto" no hace falta ponerlos. Qué manía siempre con incitar a estas cosas.
  #8 (permalink)  
Antiguo 16/06/2013, 04:55
Avatar de twilvaro  
Fecha de Ingreso: febrero-2012
Ubicación: La Línea (Cádiz)
Mensajes: 47
Antigüedad: 9 años, 2 meses
Puntos: 5
Respuesta: Mantener proporciones de imagen con varias resoluciones

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 :)
  #9 (permalink)  
Antiguo 16/06/2013, 05:02
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 9 meses
Puntos: 2113
Respuesta: Mantener proporciones de imagen con varias resoluciones

Cita:
Iniciado por twilvaro Ver Mensaje
pero fíjate que esto es lo que le falta a la respuesta de ambos :)

Cita:
Iniciado por pzin Ver Mensaje
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.


  #10 (permalink)  
Antiguo 16/06/2013, 05:20
Avatar de twilvaro  
Fecha de Ingreso: febrero-2012
Ubicación: La Línea (Cádiz)
Mensajes: 47
Antigüedad: 9 años, 2 meses
Puntos: 5
Respuesta: Mantener proporciones de imagen con varias resoluciones

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!

Etiquetas: html, resoluciones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:23.