Rendering gambar - Trik CSS | CSS Almanac 2025

Yang image-renderingmentakrifkan harta bagaimana pelayar harus menyebabkan imej jika ia dikecilkan atas atau ke bawah dari dimensi asalnya. Secara lalai, setiap penyemak imbas akan berusaha menerapkan aliasing pada gambar berskala ini untuk mengelakkan penyimpangan, tetapi ini kadang-kadang boleh menjadi masalah jika kita mahu gambar tersebut mengekalkan bentuk piksel aslinya.

img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )

Mengenai tiga nilai yang mungkin:

auto: nilai lalai yang menggunakan algoritma standard penyemak imbas untuk memaksimumkan penampilan gambar.
crisp-edges: kontras, warna dan tepi gambar akan dipelihara tanpa sebarang kelicinan atau kabur. Menurut spesifikasi ini khusus untuk seni piksel. Nilai ini berlaku untuk gambar yang ditingkatkan ke atas atau ke bawah.
pixelated: seiring perubahan ukuran gambar, penyemak imbas akan mengekalkan gaya pikselnya dengan menggunakan penskalaan tetangga terdekat. Nilai ini hanya berlaku untuk gambar yang ditingkatkan.

Properti ini dapat digunakan untuk gambar latar, canvaselemen dan juga gambar sebaris. Penting untuk diperhatikan bahawa menguji nilai-nilai ini pada masa ini sangat membingungkan kerana kurangnya sokongan penyemak imbas yang konsisten.

Contohnya

Berikut adalah gambar sebaris yang sangat kecil yang terdiri daripada empat piksel berwarna:

Sekiranya kita mengubah lebar gambar sebaris ini menjadi 300pxChrome (41) kita akan dapati penyemak imbas telah berusaha mengoptimumkan gambar dengan sebaik mungkin:

Untuk mengekalkan rupa piksel asalnya, kita dapat menggunakan nilai berikut pixelated, seperti:

img ( image-rendering: pixelated; )

Ini mengakibatkan penyemak imbas memilih algoritma alternatif untuk memproses gambar. Dalam contoh ini Chrome akan membuang alias lalai:

Malangnya setelah banyak ujian nampaknya penyemak imbas menafsirkan nilai crisp-edgesdan pixelatednilainya dengan cara yang sangat membingungkan pada masa ini, jadi penting untuk diperhatikan sekali lagi bahawa spesifikasi ini ada pada masa-masa awal. Sebagai contoh Chrome nampaknya membuat pixelatedgambar dengan cara yang sama seperti Firefox dan Safari untuk membuat gambar crisp-edges.

Contoh kod QR

Kes penggunaan harta tanah lain mungkin untuk kod QR di mana anda ingin meningkatkan saiznya tanpa memutarbelitkannya dengan menggunakan anti-aliasing standard. Pastikan untuk melihat contoh ini dalam mod skrin penuh untuk melihat regangan gambar:

Lihat demo rendering Imej Pen oleh Robin Rendle (@robinrendle) di CodePen.

Togol contoh

Di Pena di bawah ini boleh beralih antara nilai ini dan melihat perbezaan antara penyemak imbas:

Lihat demo rendering Pen Pen oleh Robin Rendle (@robinrendle) di CodePen.

Sokongan penyemak imbas

crisp-edgespada masa ini memerlukan awalan vendor ( -moz-crisp-edges) untuk mendapatkan sokongan terbaik.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.