CSSのzoom【現役エンジニアが解説】

PROGRAM

今回は、CSSのzoomについて、3つの使い方に分け、簡単に解説していきます。

数値で指定する

zoomプロパティの値には数値を指定できます。

この数値には小数も含まれ、指定した数値の倍率で表示されます。

.hoge{
    zoom:1.5;
}

上記のコードでは、hogeのクラスの要素を1.5倍の倍率で表示しています。

パーセントで指定する

zoomプロパティの値にはパーセントの単位でも指定できます。

例えば、120%と指定した場合は、要素が1.2倍の倍率で表示されます。

.hoge{
    zoom:50%;
}

上記のコードでは、hogeというクラスの要素を50%(0.5倍)の倍率で表示しています。

resetを指定する(一部ブラウザのみ)

zoomプロパティの値にはresetという英字の文字列も指定できます。

resetを指定すると、拡大・縮小表示されることなく、元の倍率で表示されます。

.hoge:hover{
    zoom:reset;
}

上記のコードでは、hogeというクラスを持つ要素にカーソルが乗っている場合に元の倍率で表示しています。