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

92

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:

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.

Tom Wright
fuente
Estoy documentando varios errores. No pude reproducir este. ¿Crees que podrías hacer un caso de prueba simple de esto?
meder omuraliev
Para ser honesto, ya no hago mucho diseño web y no estoy seguro de dónde podría encontrar una instalación de IE6 sin molestarme. Aunque lo anunciaré.
Tom Wright

Respuestas:

197

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!

Tom Wright
fuente
2
También recomendaría usar: "object-fit: contains;" o "object-fit: fill;" si esto no es suficiente para ti
Magnus
5
@Magnus de acuerdo con caniuse.com, el ajuste de objetos CSS3 no es compatible con ningún navegador actual (en el momento de escribir este artículo) y solo fue compatible con Opera. Difícilmente va a funcionar en IE6.
Richard Hauer
¿Debería esto funcionar también al revés? (es decir, establecer altura, ancho automático?) ¿Funcionará con los IE antiguos?
josinalvo
14

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.

Adam Luter
fuente
3
Si desea escalar imágenes hacia ABAJO en un contenedor con relación de aspecto preservada, parece ser la altura máxima y el ancho máximo en lugar de la altura mínima / anchura mínima, que parecen escalar imágenes más pequeñas.
Karsten
Me gusta esta respuesta y @Karsten es correcto sobre la altura máxima y el ancho máximo.
Ramsharan
2

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.

jgallant
fuente
2

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!

Adam Luter
fuente