CSS image-rendering 屬性

定義和用法

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

親自試一試

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。

技術細節

默認值： auto
繼承性： yes
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.imageRendering="pixelated"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome、Edge 和 Opera 使用 -webkit-optimize-contrast 作為 crisp-edges 值的別名。