CSS image-rendering 屬性
示例
顯示可用於影像縮放的不同演算法
.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;
}
自己動手試一試 »
定義和用法
image-rendering 屬性指定用於影像縮放的演算法型別。
注意： 此屬性對未縮放的影像無效。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
Chrome、Edge 和 Opera 使用 crisp-edges 值的替代名稱：-webkit-optimize-contrast。
CSS 語法
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 讓瀏覽器選擇縮放演算法。這是預設設定 | 演示 ❯ |
| smooth | 使用平滑影像顏色的演算法 | 演示 ❯ |
| high-quality | 與 smooth 相同，但更傾向於高質量縮放 | 演示 ❯ |
| crisp-edges | 使用能夠保留影像對比度和邊緣的演算法 | 演示 ❯ |
| pixelated | 如果影像放大，則使用最近鄰演算法，因此影像將顯示為由大畫素組成。如果影像縮小，則與 auto 相同 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
