【zoom】拡大・縮小する

zoomプロパティでは、HTML文書に定義されている@viewportの倍率の初期値を設定することができます。 これを利用する事でテキストや画像といった特定の要素を拡大・縮小して表示することなどが可能です。

ただし実際にはzoomプロパティを本来の機能として使用することはあまりなく、主にInternet Explorer(IE)のバグを避けるために使用する事が多いようです。
またzoomプロパティを使用するとhasLayoutプロパティ(IE独自)の値がtrueとなってしまいますが、zoomプロパティの値をnormalとする事でhasLayoutプロパティの値をfalseに戻すことができます。

なおzoomはIEが独自に拡張したプロパティとなります。

書式

  • zoom : ……… 拡大・縮小する

★:数値、パーセンテージ、normal

数値
数値で拡大率を指定します。1.0が通常のサイズで、zoomを指定していない状態と同様のサイズとなります。負の値は指定できません。
%値
拡大率を%値で指定します。100%が通常のサイズで、zoomを指定していない状態と同様のサイズとなります。負の値は指定できません。
normal
通常のサイズで表示します。

使用した時の例

.sample1 {zoom: normal;}
.sample2 {zoom: 1.2;}
.sample3 {zoom: 140%;}
<img class="sample1" src="image.jpg" alt="表示例:normal">
<img class="sample2" src="image.jpg" alt="表示例:1.2">
<img class="sample3" src="image.jpg" alt="表示例:140%">
<p class="sample1">zoom: normal</p>
<p class="sample2">zoom: 1.2</p>
<p class="sample3">zoom: 140%</p>

ブラウザ上の表示例

表示例:normal 表示例:1.2 表示例:140%

zoom: normal

zoom: 1.2

zoom: 140%

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
対応ブラウザ Internet Explorer5.5~ , Google Chrome~ , Safari~

関連情報