CSS image-rendering özelliği

Tanım ve Kullanım

image-rendering Özellik, görsel ölçeklemesi için kullanılacak algoritma türünü belirtir.

Dikkat:Bu özellik, küçültülmemiş görsel için geçerli değildir.

Örnek

Görsel ölçeklemesi için farklı algoritmaları gösterir:

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

Kişisel olarak deneyin

CSS dilbilgisi

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Özellik değeri

Değer Açıklama
oto Tarayıcıya ölçekleme algoritması seçimi için izin verir. Öntanımlı değer.
smooth Görsel içindeki renkleri yumuşatmak için bir algoritma kullanır
high-quality Smooth ile aynı, ancak yüksek kaliteli ölçeklemeye daha fazla öncelik verir
crisp-edges Görsel içindeki kontrastı ve kenarları korumak için bir algoritma kullanır
pixelated

Görsel büyütülürse, en yakın komşu algoritması kullanılır, bu yüzden görsel büyük piksellerden oluşmuş gibi görünecektir.

Görsel küçültülürse, oto ile aynıdır.
initial Bu özelliği öntanımlı değerine ayarlar. Bakınız initial.
geçiş Bu özelliği ebeveyn elemanından miras alır. Bakınız geçiş.

Teknik ayrıntılar

Öntanımlı değer: oto
Geçişlilik: evet
Animasyon yapımı: Desteklenmez. Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.imageRendering="pixelated"

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge ve Opera -webkit-optimize-contrast olarak crisp-edges değerinin bir takma adı kullanır.