¿Cómo preservar la relación de aspecto al escalar la imagen usando una dimensión (CSS) en IE6?

Aquí está el problema. Tengo una imagen:

<img alt="alttext" src="filename.jpg"/>

Tenga en cuenta que no se especifica altura ni ancho.

En ciertas páginas solo quiero mostrar una miniatura. No puedo alterar el html, entonces uso el siguiente CSS:

.blog_list div.postbody img { width:75px; }

Lo que (en la mayoría de los navegadores) crea una página de miniaturas uniformemente anchas, todas con relaciones de aspecto conservadas.

Sin embargo, en IE6, la imagen solo se escala en la dimensión especificada en el CSS. Conserva la altura "natural".

Aquí hay un ejemplo de un par de páginas que ilustran el problema:

• La lista, que debería mostrar miniaturas
• Una sola publicación de blog, que muestra la imagen a tamaño completo.

Estaría muy agradecido por todas las sugerencias, pero me gustaría señalar que (debido a las limitaciones de la plataforma elegida por los clientes) estoy buscando algo que no implique modificar el html. CSS también sería preferible a javascript.

EDITAR: Debe mencionar que las imágenes son de diferentes tamaños y relaciones de aspecto.

Adam Luter me dio la idea para esto, pero en realidad resultó ser muy simple:

img {
  width:  75px;
  height: auto;
}

IE6 ahora escala bien la imagen y esto parece ser lo que usan todos los demás navegadores por defecto.

¡Gracias por ambas respuestas!

Me alegro de que haya funcionado, así que supongo que tuvo que configurar explícitamente 'auto' en IE6 para que imitara a otros navegadores.

De hecho, recientemente encontré otra técnica para escalar imágenes, nuevamente diseñada para fondos. Esta técnica tiene algunas características interesantes:

1. La relación de aspecto de la imagen se conserva
2. Se mantiene el tamaño original de la imagen (es decir, nunca se puede encoger, solo crecer)

El marcado se basa en un elemento contenedor:

<div id="wrap"><img src="test.png" /></div>

Dado el marcado anterior, usa estas reglas:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

Si luego controlas el tamaño de la envoltura, obtienes los interesantes efectos de escala que enumero anteriormente.

Para ser explícito, considere el siguiente estado base: un contenedor de 100 x 100 y una imagen de 10 x 10. El resultado es una imagen a escala de 100x100.

1. Comenzando en el estado base, el tamaño del contenedor cambia a 20x100, la imagen permanece ajustada a 100x100.
2. Comenzando en el estado base, la imagen cambia a 10x20, la imagen cambia de tamaño a 100x200.

Entonces, en otras palabras, la imagen siempre es al menos tan grande como el contenedor, pero se escalará más allá para mantener su relación de aspecto.

Esto probablemente no sea útil para su sitio y no funciona en IE6. Sin embargo, es útil obtener un fondo escalado para su puerto de visualización o contenedor.

Bueno, puedo pensar en un truco de CSS que resolverá este problema.

Puede agregar la siguiente línea en su archivo CSS:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

El código anterior solo lo verá IE6. La relación de aspecto no será perfecta, pero podría hacer que parezca algo normal. Si realmente quisiera hacerlo perfecto, necesitaría escribir un javascript que lea el ancho de la imagen original y establecer la proporción en consecuencia para especificar una altura.

La única forma de hacer un escalado explícito en CSS es usar trucos como los que se encuentran aquí .

Solo IE6, también puede utilizar filtros (consulte PNGFix ). Pero aplicarlos automáticamente a la página necesitará javascript, aunque ese javascript podría estar incrustado en el archivo CSS.

Si va a requerir javascript, entonces es posible que desee que javascript complete el valor que falta para la altura inspeccionando la imagen una vez que se haya cargado el contenido. (Lo siento, no tengo una referencia para esta técnica).

Finalmente, y perdón por esta caja de jabón, es posible que desee evitar el soporte de IE6 en este asunto. Puede agregar _width: autodespués de su width: 75pxregla, de modo que IE6 al menos muestre la imagen de manera razonable, incluso si tiene el tamaño incorrecto.

Recomiendo la última solución simplemente porque IE6 está saliendo: 20% y bajando casi un por ciento al mes . Además, observo que su sitio es recreativo y está en el Reino Unido. Ambos ayudan a la inclinación demográfica a alejarse de IE6: el uso de IE6 cae casi un 40% durante los fines de semana (sin citación, lo siento), y el Reino Unido tiene un grupo demográfico de IE6 mucho más bajo (nuevamente sin citación, lo siento).

¡Buena suerte!