javascript - http www w3schools com browsers default asp

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

Question

Este es el problema. Tengo una imagen:

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

Tenga en cuenta que no se especifica altura o ancho.

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

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

Que (en la mayoría de los navegadores) hace una página de miniaturas uniformemente anchas, todas con proporciones de aspecto preservadas.

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 publicación de blog única, que muestra la imagen en 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.

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

Answer 1

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 parece ser lo que todos los otros navegadores usan por defecto.

¡Gracias por las dos respuestas!

Answer 2

Bueno, puedo pensar en un hack 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 será visto por IE6. La relación de aspecto no será perfecta, pero podría hacer que se vea algo normal. Si realmente deseaba que fuera perfecto, tendría que escribir un javascript que leyera el ancho de la imagen original, y establecer la proporción para especificar una altura.

Answer 3

La única manera de hacer escalas explícitas en CSS es usar trucos como los que se encuentran here .

Solo IE6, también puedes usar filtros (echa un vistazo a PNGFix ). Pero al 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 tal vez quiera tener javascript complete el valor que falta para la altura inspeccionando la imagen una vez que el contenido se haya cargado. (Lo siento, no tengo una referencia para esta técnica).

Finalmente, y perdóname por esta tribuna, es posible que desees evitar el soporte de IE6 en este asunto. Podría agregar _width: auto después del width: 75px regla de width: 75px , de modo que IE6 al menos renderice la imagen de manera razonable, incluso si tiene el tamaño incorrecto.

Recomiendo la última solución simplemente porque IE6 está en camino de salida: 20% y bajando casi un porcentaje por mes . Además, observo que su sitio es recreativo y en el Reino Unido. Ambas cosas ayudan a que la inclinación demográfica se aleje 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 IE6 mucho más bajo (una vez más sin cita, lo siento).

¡Buena suerte!

Answer 4

Me alegro de que funcionó, así que supongo que tienes que configurar explícitamente ''auto'' en IE6 para que pueda imitar 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. El tamaño original de la imagen se mantiene (es decir, nunca puede encogerse sino solo crecer)

El marcado se basa en un elemento contenedor:

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

Dado el marcado anterior, entonces usa estas reglas:

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

Si luego controlas el tamaño del contenedor, obtienes los efectos de escala interesantes que mencioné arriba.

Para ser explícito, considere el siguiente estado base: Un contenedor que es 100x100 y una imagen que es 10x10. El resultado es una imagen escalada de 100x100.

1. Comenzando en el estado base, el contenedor cambió su tamaño a 20x100, la imagen se mantiene redimensionada a 100x100.
2. Comenzando en el estado base, la imagen cambia a 10x20, la imagen cambia 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 vista o contenedor.