Bicubic Scaling pre obrázky – fix pre Internet Explorer (IE6, IE7)

By | 22. apríla 2009

Veľa webizajnérov tento trik pozná a používa, kto nepozná, teraz má možnosť sa s ním zoznámiť.

Občas sa stane, že potrebujete pomocou width a height parametrov (či už v HTML kóde, alebo v CSS) zmeniť veľkosť obrázku. Tým samozrejme obrázok stráca na kvalite (či už ho zmenšujete, alebo nebodaj zväčšujete). V Internet Exploreri 6 a 7 (IE6, IE7) však obrázok stratí na kvalite ešte viac. Riešenie je vcelku jednoduché…

Pre tieto 2 “prehliadače” je vhodné použiť funkciu -ms-interpolation-mode: bicubic;. Samozrejme po jej definovaní v hlavnom CSS súbore sa stane vaše CSS nevalídne, preto je vhodné využiť externé štýly pre IE6 a IE7.

Príklad využitia externých štýlov pre IE6 a IE7:


<!--[if IE 6]><link rel='stylesheet' href='css/ie6.css' type='text/css' media='screen' /><![endif]-->
<!--[if IE 7]><link rel='stylesheet' href='css/ie7.css' type='text/css' media='screen' /><![endif]-->

Potom v ie6.css a ie7.css definovať -ms-interpolation-mode: bicubic; aplikovať na požadované obrázky.

Použitie Bicubic Scaling v CSS


#content .box img { -ms-interpolation-mode: bicubic; }

Bicubic Scaling v praxi:

ie-fix-bicubic-scaling

Pridajte komentár