Estoy trabajando con imágenes, y me encontré con un problema con las relaciones de aspecto.
<img src="big_image.jpg" width="900" height="600" alt="" />
Como puedes ver, height
y width
ya están especificados. He añadido la regla CSS para las imágenes:
img {
max-width:500px;
}
Pero para big_image.jpg
, recibo width=500
y height=600
. ¿Cómo puedo establecer que las imágenes se redimensionen, manteniendo su relación de aspecto?
La propiedad background-size es ie>=9 solamente, pero si te parece bien, puedes usar un div con background-image
y poner background-size: contain
:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Ahora sólo tienes que establecer el tamaño de tu div a lo que quieras y no sólo la imagen mantendrá su relación de aspecto, sino que también se centralizará tanto vertical como horizontalmente dentro del div. Solo no olvides establecer los tamaños en el css ya que los divs no tienen el atributo width/height en la propia etiqueta.
Este enfoque es diferente a la respuesta de setecs, usando esto el área de la imagen será constante y definida por usted (dejando espacios vacíos ya sea horizontal o verticalmente dependiendo del tamaño del div y la relación de aspecto de la imagen), mientras que la respuesta de setecs obtendrá una caja que exactamente el tamaño de la imagen escalada (sin espacios vacíos).
Editar: Según la documentación de MDN background-size puedes simular la propiedad background-size en IE8 usando una declaración de filtro propia:
Aunque Internet Explorer 8 no soporta la propiedad background-size, es posible emular parte de su funcionalidad usando la función no estándar -ms-filter:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Quitar la propiedad "altura".
<img src="big_image.jpg" width="900" alt=""/>
Al especificar ambas, está cambiando la relación de aspecto de la imagen. Si sólo se especifica una, se cambiará el tamaño pero se conservará la relación de aspecto.
Opcionalmente, para restringir los sobredimensionamientos:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
No hay una forma estándar de preservar la relación de aspecto de las imágenes con "ancho", "alto" y "ancho máximo" especificados juntos.
Por lo tanto, nos vemos obligados a especificar width
y height
para evitar los "saltos" de la página durante la carga de imágenes, o a utilizar max-width
y no especificar las dimensiones de las imágenes.
Especificar sólo width
(sin height
) no suele tener mucho sentido, pero puedes intentar anular el atributo HTML height
añadiendo una regla como IMG {height: auto; }
en tu hoja de estilos.
Véase también el fallo relacionado de Firefox bug 392261.