Chrome ve windows je tak trochu retard. Ve výchozím nastavení zmenšuje obrázky tak, že se mohou jevit jako rozmazané. V žádném jiném prohlížeči se to neděje.
Pokud tedy po něm potřebujete zobrazovat obrázky v jiné velikosti, než v jaké máte zdroj, je zapotřebí přidat do CSS toto:
img {
image-rendering: -webkit-optimize-contrast;
}
Zabrání to tomu extrémnímu rozmazání, a přitom to pořád bude vyhlazené a nebude to rozpixelované.
Bohužel, toto řešení však negativně ovlivní safari na macu (kvůli stejnému webkit jádru), kdy naopak při změně obrázků k žádnému vyhlazování nedochází anebo jen minimálně, takže je nutné tento zásah omezit jen pro chrome. Na řadu tedy přichází CSS hack:
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
img {
image-rendering: -webkit-optimize-contrast;
}
}
Snad to bude nějakou dobu fungovat.
