tipos style para paginas hojas etiquetas etiqueta estilos estilo enlazar ejemplos codigos atributo css image firefox resize

style - etiquetas css



Firefox difumina una imagen cuando se escala a través de CSS externo o estilo en línea. (9)

Cuando escalo visualmente una imagen, Firefox 3 la desenfoca. Firefox 2 y otros navegadores no, que es el comportamiento que espero. Esto es especialmente cojo para crear un juego basado en web usando png o gif sprites.

Por ejemplo, al mostrar una imagen de 100x100 en Firefox 3 de esta manera:

<img src="sprite.gif" width="200" />

o

<img src="sprite.gif" style="width:200px; height:200px;" />

parece borroso en FF3, no en IE.

¿Alguna idea sobre cómo prevenir esto?

Debe evitar escalar la imagen en el lado del cliente. Escalar una imagen hacia arriba es como hacer zoom, el navegador no tiene la información para que la imagen lo muestre en una resolución más alta de lo que realmente es, por lo que no puede hacer eso sin difuminar la imagen, tal vez no se note en IE, intente cambiando 200px a 400px.

Descubrí esta nueva característica de Firefox:

http://developer.mozilla.org/En/CSS/Image-rendering

Así que poner esto en tu CSS lo arreglará:

image-rendering: -moz-crisp-edges;

Pensé que compartiría esta información. Perdón por responder mi propia pregunta;)

En realidad, prefiero la forma en que FF lo hace, ya que utiliza la interpolación al escalar imágenes, en la mayoría de los casos esto hace que las imágenes se vean mucho mejor de lo que lo harían en IE. Sin embargo, creo que puede haber casos en los que no es bueno, como cuando se usan sprites.

Sin embargo, no creo que haya una forma de evitarlo.

Está escalando la imagen desde su tamaño original; el efecto deseado normalmente es tener una escala suave, y parece que FFX3 ha comenzado a hacer esto (supongo que se trata de un filtrado bilineal). Creo que si miras Safari y Opera, verás que también filtran la imagen.

Internet Explorer 8 también "desenfoca" imágenes de forma predeterminada al escalarlas. Esto es realmente algo bueno. La mayoría de las imágenes se ven mejor cuando se escalan utilizando un muestreo bicúbico en lugar del muestreo del vecino más cercano.

Si desea que Internet Explorer 8 escale imágenes como las versiones anteriores, ponga esto en su CSS:

-ms-interpolation-mode: nearest-neighbor;

Si desea que Internet Explorer 7 escale imágenes como IE 8, use esto:

-ms-interpolation-mode: bicubic;

Además del aspecto de la imagen, también debes considerar el rendimiento. Descubrí que IE 7 e IE 8 necesitan mucha más potencia de CPU para escalar imágenes cuando se utiliza muestreo bicúbico que Firefox 3.6.

Lamentablemente, no tengo una solución para esto, pero esto es un gran obstáculo para una gran cantidad de usuarios (por ejemplo, los artistas de píxeles). Si se ve afectado por esto, envíe sus comentarios a http://hendrix.mozilla.org/ y vote por el error correspondiente .

Es decepcionante que Mozilla esté ignorando este problema. Para los muchos usuarios afectados, significa que no hay más remedio que cambiar de navegador. IE tiene una propiedad CSS para seleccionar el filtro de cambio de tamaño, por lo que esta parece ser la mejor opción.

Aquí está el informe de errores para Google Chrome, que tiene el mismo problema que Firefox. No sé nada de Opera, pero escuché que usan algunas heurísticas para una escala automática más sana.

Me pregunto si obtendrías mejores resultados si creases los sprites en el tamaño más grande que esperas que sean vistos, y luego los escalas si es necesario.

http://developer.mozilla.org/En/CSS/Image-rendering solo se aplica a las compilaciones de troncales actuales de Firefox (Minefield / 3.6a1pre / Gecko 1.9.2). Esta característica no está en Firefox 3.0 y no estará en la próxima versión 3.5. El primer lanzamiento con esa opción será el próximo lanzamiento importante después de 3.5 actualmente en las primeras etapas de planificación con un lanzamiento estimado en 2010.