Properti image-rendering CSS

Definisi dan penggunaan

image-rendering Atribut menentukan jenis algoritma pengukuran yang digunakan untuk pengukuran gambar.

Perhatian:Atribut ini tidak berpengaruh bagi gambar yang belum disampingkan.

Contoh

Menampilkan algoritma yang dapat digunakan untuk pengukuran gambar:

.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;
}

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai Deskripsi
auto Memungkinkan browser memilih algoritma pengukuran. Nilai default.
smooth Menggunakan algoritma untuk memutar warna di gambar
high-quality Sama seperti smooth, tetapi lebih memilih pengukuran tinggi
crisp-edges Menggunakan algoritma untuk mempertahankan kontras dan边缘 di gambar
pixelated

Jika gambar dipebesar, maka menggunakan algoritma terdekat, sehingga gambar akan terlihat terdiri dari pixel besar.

Jika gambar disampingkan, maka sama seperti auto.
initial Atur atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: auto
Inheritsi: yes
Pembuatan animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.imageRendering="pixelated"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge dan Opera menggunakan -webkit-optimize-contrast sebagai alias untuk nilai crisp-edges.