[新着] Webテンプレートを仮オープンしました
zoom は、拡大を指定するプロパティです。
img要素にこのスタイルを設定すると、画像の拡大・縮小を指定することができます。
#example {
zoom: 1.5;
}
| zoom | 拡大率を指定します |
|---|
拡大率は、数値（単位なし）か %（割合）で指定します。
※デフォルトは normal（標準サイズ）です。（例：zoom: normal）
■数値で指定
（例）
zoom: 1; … 標準の大きさ
zoom: 1.5; … 1.5倍に拡大
zoom: 0.5; … 半分に縮小
■パーセントで指定
（例）
zoom: 100%; … 標準の大きさ
zoom: 150%; … 1.5倍に拡大
zoom: 50%; … 半分に縮小
このプロパティはIE 5.5以上でしか対応していないので、使用する際には注意が必要です。
※画像サイズの変更には、できるだけ画像編集ソフトを使用した方が良いでしょう。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example1 { zoom: 2; }
#example2 { zoom: 150%; }
#example3 { zoom: 70%; }
-->
</style>
</head>
<body>
<p><img src="image/photo.jpg" alt="サンプル" width="200" height="133">標準の大きさ</p>
<p><img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example1">2倍に拡大</p>
<p><img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example2">150%に拡大</p>
<p><img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example3">70%に縮小</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
標準の大きさ
2倍に拡大
150%に拡大
70%に縮小
