2012-04-11 11 views
5

Sto ottimizzando il mio sito per questi monitor ad alta risoluzione (in particolare il nuovo iPad). Ho il sito formattato nel modo che voglio, e stavo solo aumentando la risoluzione di ogni immagine ma ancora limitandola ai DIV che attualmente ho. Ad esempio, ho un'immagine con una risoluzione di 483x246 e ho inserito un DIV con una dimensione impostata di 188x96.Immagine ad alta risoluzione Rendering del browser IE

Le immagini sembrano eccezionali su Chrome, Firefox e, soprattutto, sul nuovo iPad. Anche ingrandito è bello e nitido (in contrasto con la mia vecchia immagine 188x96 che appariva sfocata e pixelata quando ingrandita)

Il problema si verifica quando apro la pagina in IE. Visualizza l'immagine con le dimensioni corrette ma è seghettata. Vedi il link al confronto qui sotto. So che è un problema con il modo in cui IE ridimensiona e rende le immagini al volo.

La mia domanda sarebbe, c'è un modo per rendere IE visualizzare l'immagine bene? In caso contrario, c'è un modo in cui posso inserire il codice in modo che se rileva IE, visualizza la mia vecchia immagine a bassa risoluzione? Ho cercato ovunque ma non ho trovato nulla che si riferisca al mio problema specifico. So che questo è un piccolo esempio ma le mie immagini più grandi fanno la stessa cosa e sono più evidenti. Spero che tutti voi possiate aiutare. Grazie. :)

Confronto: enter image description here

risposta

3

Avete provato a mettere questo nel tuo CSS?

img {-ms-interpolation-mode: bicubic; }

C'è anche questo https://github.com/adamdbradley/foresight.js che sembra molto interessante

Assicurarsi che IE9 non è in modalità di compatibilità o in modalità IE7/8 ... IE9 Mode

+0

Grazie! Questo ha funzionato, ma per le versioni precedenti di IE. IE 9 mostra ancora immagini frastagliate. :(Oh bene, dovrò dare un'occhiata a quel copione, che in realtà sembra interessante.Grazie ancora – djcloud23

+0

Ti dispiacerebbe mandarmi un link dell'esempio? Sono sicuro che possiamo aggiustarlo ... anche tu controllato il tuo IE9 non è in modalità IE7 o IE8? colpisci F12 quindi clicca dove dice Modalità Browser: IE ... – hcharge

0

Il motivo di questo happends se a causa della BitmapData è in realtà reso completamente diverso nel browser IE, la cosa IE fa è che "taglia" pixel di distanza nel corso di un rapporto impostato così come ogni 5 pixel strappa un pixel e quindi fa sembrare che manchi determinate proprietà del gradiente.

non molto si può fare su questo, tranne per mantenere il rapporto di aspetto set, ma immagino che avresti saputo che da soli già

Problemi correlati