CSS - image-rendering

トップ > CSSリファレンス > image-rendering

概要

属性名 image-rendering
auto | smooth | high-quality | pixelated | crisp-edges
初期値auto
適用可能要素すべての要素
継承する
サポートhttps://caniuse.com/?search=image-rendering

説明

画像を拡大・縮小表示する際のアルゴリズムを指定します。

説明
autoブラウザにまかせたアルゴリズムが選択されます。
smooth画像の外観性を最大限に保つように拡大・縮小されます。双一次補間などの色のスムージングアルゴリズムが利用されるかもしれません。画像が写真の場合に有用です。
high-quality可能な限りの高品質性を保って拡大・縮小されます。
pixelatedピクセルの表示を保ったまま拡大・縮小します。
crisp-edges画像のコントラストとエッジを保つように拡大・縮小されます。ピクセルアートなどに有用です。Firefox や Safari でサポートされています。Chrome や Edge はまだ未対応のようです。

使用例

CSS
img {
  width: 5rem;
}
.auto {
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
HTML
<img alt="test" class="auto" src="example.gif">
<img alt="test" class="crisp-edges" src="example.gif">
<img alt="test" class="pixelated" src="example.gif">
表示
test test test

リンク


Copyright (C) 2022 杜甫々
初版:2022年7月31日、最終更新:2022年7月31日
http://www.tohoho-web.com/css/prop/image-rendering.htm