CSS zoom 屬性

定義和用法

zoom 屬性指定元素的縮放比例。元素可以被放大或縮小。

實例

例子 1

對文本使用 zoom 屬性：

p.a {
  zoom: normal;
}
p.b {
  zoom: 150%;
}
p.c {
  zoom: 0.6;
}

親自試一試

例子 2

使用 zoom 屬性調整元素大小：

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}
div.a {
  zoom: normal;
}
div.b {
  zoom: 150%;
}
div.c {
  zoom: 0.6;
}

親自試一試

CSS 語法

zoom: normal|%|number|unset|initial|inherit;

屬性值

值 描述
normal 默認值。元素以正常方式渲染。
%

以百分比指定縮放比例。

100% = 正常。

要放大，使用大于 100% 的值。

要縮小，使用小于 100% 的值。
number

以數字形式指定縮放比例（百分比）。

1.0 = 正常。

要放大，使用大于 1.0 的值。

要縮小，使用小于 1.0 的值。
unset 取消設置縮放比例（恢復為正常）。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： normal
繼承性： 否
動畫制作： 支持。請參閱：動畫相關屬性。
版本： CSS Viewport Module Level 1
JavaScript 語法： object.style.zoom = "3"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0