属性名 | 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 はまだ未対応のようです。 |
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">