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 は crisp-edges 値の別名として -webkit-optimize-contrast を使用しています。