image-renderingO kadar ölçekli veya aşağı orijinal boyutlarından ise tarayıcı bir görüntü oluşturması gerektiğini nasıl mülkiyet tanımlar. Varsayılan olarak, her tarayıcı, bozulmayı önlemek için bu ölçeklenmiş görüntüye takma ad uygulamayı deneyecektir, ancak görüntünün orijinal pikselli biçimini korumasını istiyorsak bu bazen bir sorun olabilir.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Bu üç olası değer hakkında:
auto: Bir görüntünün görünümünü en üst düzeye çıkarmak için tarayıcının standart algoritmasını kullanan varsayılan değer.crisp-edges: Görüntünün kontrastı, renkleri ve kenarları herhangi bir yumuşatma veya bulanıklık olmadan korunur. Spesifikasyona göre bu, özellikle piksel sanatı için tasarlandı. Bu değer, yukarı veya aşağı ölçeklenmiş görüntüler için geçerlidir.pixelated: görüntünün boyutu değiştikçe, tarayıcı en yakın komşu ölçeklemeyi kullanarak pikselli stilini koruyacaktır. Bu değer yalnızca büyütülmüş görüntüler için geçerlidir.
Bu özellik arka plan görüntülerine, canvasöğelere ve aynı zamanda satır içi görüntülere uygulanabilir. Ancak, şu anda bu değerleri test etmenin, tutarlı tarayıcı desteğinin olmaması nedeniyle özellikle kafa karıştırıcı olduğunu unutmamak önemlidir.
Misal
İşte dört renkli pikselden oluşan çok küçük bir satır içi görüntü:
Bu satır içi görüntünün genişliğini 300pxChrome'da (41) olarak değiştirirsek, tarayıcının görüntüyü yapabildiği en iyi şekilde optimize etmeye çalıştığını görürüz:
Orijinal pikselli görünümünü korumak için aşağıdaki pixelateddeğeri kullanabiliriz , örneğin:
img ( image-rendering: pixelated; )Bu, tarayıcının görüntünün işleneceği alternatif bir algoritma seçmesiyle sonuçlanır. Bu örnekte Chrome, varsayılan takma adı kaldıracaktır:
Ne yazık ki, birçok testten sonra, tarayıcıların crisp-edgesve pixelateddeğerlerini şu anda çok kafa karıştırıcı şekillerde yorumladıkları görülüyor, bu nedenle bu spesifikasyonun ilk günlerinde olduğunu bir kez daha not etmek önemlidir. Örneğin, Chrome, görüntüleri pixelatedFirefox ve Safari ile aynı şekilde işliyor gibi görünüyor crisp-edges.
QR kodu örneği
Bu özelliğin başka bir kullanım durumu, standart kenar yumuşatma kullanarak boyutunu deforme etmeden boyutunu artırmak istediğiniz QR kodları için olabilir. Görüntü uzatmayı görmek için bu örneği tam ekran modunda kontrol ettiğinizden emin olun:
CodePen'de Robin Rendle (@robinrendle) tarafından hazırlanan Pen Görüntü oluşturma demosuna bakın.
Örneği değiştir
Aşağıdaki Kalemde bu değerler arasında geçiş yapmak ve tarayıcılar arasındaki farklılıkları görmek mümkündür:
CodePen'de Robin Rendle (@robinrendle) tarafından hazırlanan Pen Image işleme demosuna bakın.
Tarayıcı desteği
crisp-edgesşu anda -moz-crisp-edgesmümkün olan en iyi desteği almak için satıcı öneklerini ( ) gerektirir .
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 41 | 3.6 * | 11 * | 79 | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 | 10.0-10.2 |
Bu güncelleme sırasında Firefox 61 desteklemekte crisp-edgesancak desteklememektedir pixelatedve Chrome 68 desteklemekte pixelatedancak desteklememektedir crisp-edges.