image-rendering
Misol
Rasmni masshtablashda ishlatilishi mumkin bo‘lgan turli algoritmlarni ko‘rsating:
.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;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
image-rendering xususiyati rasmni masshtablash uchun ishlatiladigan algoritm turini belgilaydi.
Eslatma: Bu xususiyat masshtablanmagan rasmlarga ta’sir qilmaydi.
| Standart qiymat: | auto |
|---|---|
| Meros qilinadi: | ha |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.imageRendering="pixelated" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
Chrome, Edge va Opera
crisp-edges qiymati uchun muqobil nomdan foydalanadi: -webkit-optimize-contrast.
CSS sintaksisi
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| auto | Masshtablash algoritmini brauzer tanlaydi. Bu standart qiymat | Demo ❯ |
| smooth | Rasmdagi ranglarni silliqlaydigan algoritmdan foydalanadi | Demo ❯ |
| high-quality | smooth bilan bir xil, lekin yuqoriroq sifatli masshtablashga ustunlik beriladi | Demo ❯ |
| crisp-edges | Rasmdagi kontrast va qirralarni saqlab qoladigan algoritmdan foydalanadi | Demo ❯ |
| pixelated | Agar rasm kattalashtirilsa, eng yaqin qo‘shni (nearest-neighbor) algoritmi ishlatiladi, shuning uchun rasm katta piksellardan tashkil topgandek ko‘rinadi. Agar rasm kichraytirilsa, natija auto bilan bir xil bo‘ladi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!