Alta qualità sulle miniature con i CSS in IE7

Internet Expolorer 7 supporta la modalità di ricampionatura bicubic sulle immagini. Si provi a ridimensionare una immagine di grandi dimensioni, con un codice simile al seguente:

<img src="/pic.jpg" alt="Dimensioni originali: 500x500" class="thumb" width="50" height="50" /> 

Il risultato del codice appena scritto più su, produrrebbe un effetto orribile in IE7, con una qualità notevolmente inferiore nella versione ridimensionata.

Il problema potrebbe essere risolto facilmente in IE7 mediante il seguente codice css:

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

La pagina dimostrativa riporta quanto scritto nell'articolo.

Attributo -ms-interpolation-mode Attribute - Proprietà msInterpolationMode

La proprietà imposta o recupera il metodo di interpolazione (o ricampionamento) utilizzato per "stretchare" (allungare) le immagini.

Spiegazione

La proprietà msInterpolationMode è stata introdotta in IE7 e va applicata solo per dimensionare le immagini. Per esempio, se le dimensioni di una immagine sono 200x200 pixel e si desidera portarle a 400x400 pixel, l'immagine deve essere "stretchata" adottando l'algoritmo nearest-neighbor, se non diversamente specificato.

Se la visualizzazione predefinita della pagina è 100%, l'interpolazione di default è nearest-neighbor, altrimenti viene utilizzata la modalità bicubica.

Special thanks to Guillermo Rauch. :)