CSS - 缩放

CSS 的zoom属性用于控制元素的放大级别。

zoom是CSS的非标准属性，建议使用transform: scale()函数来达到相同的效果。

可能的值

normal：指定元素应以其正常大小呈现。
reset：指定元素不应放大或缩小，除非用户应用非捏合缩放。不建议使用，请改用unset值。
<percentage>：任何百分比值，称为缩放因子。
- 值为100%表示normal。
- 大于100%的值表示元素应放大。
- 小于100%的值表示元素应缩小。
<number>：任何与百分比值对应的数值。例如：1.0 = 100% = normal。
- 值为1.0表示normal。
- 大于1.0的值表示元素应放大。
- 小于1.0的值表示元素应缩小。

应用于

所有HTML元素。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

DOM语法

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

CSS zoom - normal 值

这是一个示例

Open Compiler

<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 - <percentage> 值

这是另一个示例

Open Compiler

<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 元素在悬停时被放大

Open Compiler

<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 - 带动画

这是一个示例，其中在悬停时添加了动画以及缩放效果

Open Compiler

<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>

打印页面