CSSでドット絵をボケさせずに拡大する方法

技術

例えば、HTMLで下記のように 16×16 で描いたドット絵を大きく表示させようとすると

<img src="apple.png" width="512"/>

このようにボケてしまいます。せっかくのドットが勿体無いですね。

そこで、下記のようなCSSを加えると「ニアレストネイバー法」というエッジを保ったままサイズを変更する方法で拡大してくれます。

.pixelart {
    image-rendering: pixelated;
    image-rendering: -webkit-crisp-edges;
    image-rendering: -moz-crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

このクラスを先ほどのimgタグに加えて表示させると

<img class="pixelart" src="apple.png" width="512"/>

この通り!ドットがはっきりとしたまま表示できました!

コメント

タイトルとURLをコピーしました