| 属性名 | image-rendering |
|---|---|
| 値 | auto | smooth | high-quality | pixelated | crisp-edges |
| 初期値 | auto |
| 適用可能要素 | すべての要素 |
| 継承 | する |
| サポート | https://caniuse.com/?search=image-rendering |
画像を拡大・縮小表示する際のアルゴリズムを指定します。
| 値 | 説明 |
|---|---|
| auto | ブラウザにまかせたアルゴリズムが選択されます。 |
| smooth | 画像の外観性を最大限に保つように拡大・縮小されます。双一次補間などの色のスムージングアルゴリズムが利用されるかもしれません。画像が写真の場合に有用です。 |
| high-quality | 可能な限りの高品質性を保って拡大・縮小されます。 |
| pixelated | ピクセルの表示を保ったまま拡大・縮小します。 |
| crisp-edges | 画像のコントラストとエッジを保つように拡大・縮小されます。ピクセルアートなどに有用です。 |
img {
width: 5rem;
}
.auto {
image-rendering: auto;
}
.crisp-edges {
image-rendering: crisp-edges;
}
.pixelated {
image-rendering: pixelated;
}
<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">
