CSSのzoom【現役エンジニアが解説】
今回は、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というクラスを持つ要素にカーソルが乗っている場合に元の倍率で表示しています。