CSS - zoom（缩放）

CSS 的 zoom 属性在控制元素的放大级别时很有用。

zoom 是 CSS 的一个非标准属性，建议对相同的输出使用 transform： scale（）函数。

可能的值

normal：指定元素应以其正常大小呈现。

reset：指定元素不应去（放大），除非用户应用非捏合缩放。不建议，而是使用未设置的值。

<percentage>：称为缩放因子的任何百分比值。

值等于 100% 是正常的。
值大于 100% 表示元素应放大。
值小于 100% 表示元素应缩小。

<number>：对应于百分比值的任何数字值。例如：1.0 = 100% = 正常。

值等于 1.0 是正常的。
值大于 1.0 表示元素应放大。
值小于 1.0 表示元素应缩小。

适用于

所有 HTML 元素。

DOM 语法


 object.style.zoom = "normal | reset | <number> | <percentage>";

CSS zoom - 正常值

下面是一个示例：


<html>
<style>
	 	p.normal {
	 	 	 zoom: normal;
	 	}
	 	p.percent {
	 	 	 zoom: 170%;
	 	}
	 	p.number {
	 	 	 zoom: 4;
	 	}
	 	p.unset {
	 	 	 zoom: unset;
	 	}
</style>
<head>
</head>
<body>
	 	<p class="normal">Normal size</p>
	 	<p class="percent">Zoom in percentage</p>
	 	<p class="number">Zoom in number</p>
	 	<p class="unset">Zoom settings reverted.</p>
</body>
</html>

CSS zoom - <百分比>值

这是另一个示例：


<html>
<head>
<style>
	 	div.box {
	 	 	 height: 50px;
	 	 	 width: 50px;
	 	 	 display: inline-block;
	 	 	 padding: 5px;
	 	 	 border: 1px solid black;
	 	}
	 	div#m {
	 	 	 background-color: orange;
	 	 	 zoom: 200%;
	 	}
	 	div#n {
	 	 	 background-color: lavender;
	 	 	 zoom: 1.5;
	 	}
	 	div#o {
	 	 	 background-color: palevioletred;
	 	 	 zoom: normal;
	 	}
</style>
</head>
<body>
	 	<div id="m" class="box"></div>
	 	<div id="n" class="box"></div>
	 	<div id="o" class="box"></div>
</body>
</html>

CSS zoom - 带数字值

下面是一个示例，其中 h1 元素在悬停时缩放：


<html>
<head>
<style>
	 	p {
	 	 	 border: 1px solid red;
	 	}
	 	p.percent {
	 	 	 zoom: 170%;
	 	}
	 	p.number {
	 	 	 zoom: 4;
	 	}
	 	h1:hover {
	 	 	 zoom: 250%;
	 	 	 text-decoration-line: underline;
	 	}
</style>
</head>
<body>
	 	<h1>Hover to Zoom</h1>
	 	<p class="percent">Zoom in percentage</p>
	 	<p class="number">Zoom in number</p>
</body>
</html>

CSS zoom - 带动画

下面是一个示例，其中动画在悬停和缩放时添加：


<html>
<head>
<style>
	 	div.box {
	 	 	 width: 25px;
	 	 	 height: 25px;
	 	 	 vertical-align: middle;
	 	 	 display: inline-block;
	 	 	 transition: transform .5s;
	 	 	 padding: 10px;
	 	}
	 	div#a {
	 	 	 background-color: rgb(58, 220, 22);
	 	 	 zoom: normal;
	 	}
	 	div#b {
	 	 	 background-color: rgb(239, 86, 137);
	 	 	 zoom: 200%;
	 	}
	 	div#c {
	 	 	 background-color: rgb(223, 217, 44);
	 	 	 zoom: 2.9;
	 	}
	 	div.box:hover {
	 	 	 transform: scale(1.5);
	 	}
</style>
</head>
<body>
	 	<h1>Animation added on hover</h1>
	 	<div id="a" class="box"></div>
	 	<div id="b" class="box"></div>
	 	<div id="c" class="box"></div>
</body>
</html>

打印本页