max-width y max-height para escalar imágenes en Internet Explorer

Question

Estoy en el proceso de crear una galería que muestra varios formatos de imágenes (ancho, cuadrado y alto) en un espacio fijo. La solución ideal sería que todas las imágenes tengan las mismas dimensiones, pero esto no se puede lograr.

Estoy usando una combinación de ancho máximo y alto máximo para garantizar que las imágenes se adapten correctamente al espacio limitado. El único problema con esto es Internet Explorer, que muestra imágenes en los anchos y alturas máx. Y máx. De altura (debido a su incapacidad para comprenderlas).

He estado buscando varias soluciones a este problema, pero no he logrado hacer que ninguna funcione (todavía). La galería utiliza jQuery y Galleriffic, que funcionan bien, excepto por el problema de máximo ancho/máximo de altura.

¿Alguna sugerencia?

Editar: Parece que el problema radica en la forma en que Internet Explorer maneja la altura máxima y el ancho máximo con imágenes, en el sentido de que no se escalan correctamente.

Edit 2: He hecho algunas pruebas y el problema con IE no es max-width y max-height, que funcionan (porque se están asegurando de que la imagen no se convierta más grande que lo que está establecido a), por ejemplo:

max-width: 600px; max-height: 600px;

se asegurará de que la imagen no se vuelve más grande que esos dos valores. Las imágenes no se escalan correctamente, por lo que las imágenes altas aparecerán aplastadas y las imágenes anchas aparecerán estiradas. Encendí la vista de Compatibilidad IE7 y las imágenes se muestran correctamente, pero en IE8, aparece como aplastado/estirado (lo que significa que será un problema con IE8) ..

Answer 1

has probado altura: automático y ancho: automático como además de usar la altura máxima y el ancho máximo, esto generalmente hace que IE proporcione la relación de aspecto correcta.