CSS - zoom

• トップ
• CSSリファレンス
• zoom

概要

説明

要素を拡大・縮小します。文字だけではなく画像やボーダーの太さなどもすべて拡大・縮小されます。

<percentage>

拡大・縮小率をパーセンテージで表します。50% は 50% に縮小、200% は 200% に拡大します。

<number>

拡大・縮小率を数値で表します。1 は 100% を、2.5 は 250% を意味します。

使用例

.my-example {
  display: inline-block;
  border: 1px solid #999;
}

<div class="my-example" style="zoom:50%;"><img src="image.png" alt="ゆきだるま"> ゆきだるま</div>
<div class="my-example" style="zoom:100%;"><img src="image.png" alt="ゆきだるま"> ゆきだるま</div>
<div class="my-example" style="zoom:200%;"><img src="image.png" alt="ゆきだるま"> ゆきだるま</div>

ゆきだるま

ゆきだるま

ゆきだるま

リンク

• https://drafts.csswg.org/css-viewport/#zoom-property
• https://developer.mozilla.org/ja/docs/Web/CSS/zoom
• https://caniuse.com/css-zoom