CSS中的“zoom”是什么作用？

Question

我发现一些jQuery插件在它们的CSS规则中使用了“zoom”描述符，我甚至查阅了W3C网站，发现它用于放大，但我应该如何实际应用它？或者我需要定义一些视口吗？那么我该如何定义这样的视口？或者说我整个理解都错了吗？

是否可以像这样使用它：

a {
    zoom:1;
}

a:hover {
   zoom:2;
}

- monk

---

Zoom, 顾名思义，就是简单的缩放：http://jsfiddle.net/W24de/ ;) - meo

你应该将jQuery插件中实际使用的代码复制到你的问题中。很可能，它被使用的原因是为了提供Ilia Akhmadullin所提到的hasLayout。由于浏览器支持不完整，没有人应该真正使用zoom属性来进行“缩放”。 - thirtydot

Answer 1

Zoom不包含在CSS规范中，但它在IE、Safari 4和Chrome中得到支持（在Firefox 3.5及以上版本中可以使用-moz-transform: scale(x)实现类似的效果）。请参见此处。

因此，所有浏览器

 zoom: 2;
 zoom: 200%;

将会使您的对象放大2倍，就像是将其大小翻倍。这意味着如果您有

a:hover {
   zoom: 2;
}

当鼠标悬停时，<a> 标签将放大 200%。

就像我所说，在 FireFox 3.5+ 中使用 -moz-transform: scale(x)，它做的事情差不多。

编辑：针对 thirtydot 的评论，我要说 scale() 并不能完全替代。它不会像 zoom 那样在行内扩展，而是会超出框并覆盖内容，不会强制其他内容让路。在这里可以看到它的效果 here。此外，似乎 Opera 不支持 zoom。

这篇文章 提供了有用的见解，介绍了解决与 scale 不兼容的方法以及使用 jQuery 的解决方法。

- user1211577

---

“zoom”和“transform: scale()”有显著的区别。变换原点很容易修复，但是“transform”不影响内容流动，而“zoom”会影响，则难以简单修复。此外，“zoom”似乎在Opera中不受支持。您应该编辑您的答案，目前可能会导致误解。 - thirtydot

修改了我的回答。谢谢。 - user1211577

使用z-index和缩放一起会很有趣。 - TrySpace

嗨，我建议您修改此答案以更清楚地阐明以下几点：a)缩放属性未标准化，因此最好避免使用b)带有-moz-前缀的属性（任何前缀实际上都是如此，Firefox只是更有原则性）也是实验性的，并且将在有标准化方法时被删除。现在，使用或推荐-moz-transform并不是一个好主意。 - hallvors

@hallvors 这个问题不是我应该使用缩放，而是缩放做什么。在答案中也提到了不兼容性，并提供了相关支持的信息。 - user1211577

没问题，虽然我认为注明某些东西是否标准很重要。 - hallvors

Answer 2

有人可能会感到惊讶，没有人提到 zoom: 1; 的作用，它可以用于解决 IE6-7 中的大多数仅限 IE 的 bug，通过触发 hasLayout。

- Ilia Akhmadullin

Answer 3

CSS的zoom属性现在被广泛支持，占总浏览器人口的86%以上。

详见：http://caniuse.com/#search=zoom

document.querySelector('#sel-jsz').style.zoom = 4;

#sel-001 {
  zoom: 2.5;
}
#sel-002 {
  zoom: 5;
}
#sel-003 {
  zoom: 300%;
}

<div id="sel-000">IMG - Default</div>

<div id="sel-001">IMG - 1X</div>

<div id="sel-002">IMG - 5X</div>

<div id="sel-003">IMG - 3X</div>


<div id="sel-jsz">JS Zoom - 4x</div>

- Adesh M

Answer 4

这个属性控制当前元素的放大级别。元素的渲染效果就像相机的“变焦”功能一样。尽管这个属性不会继承，但它仍会影响子元素的渲染。

例子：

 div { zoom: 200% }
 <div style=”zoom: 200%”>This is x2 text </div>

- Scriptor

Answer 5

"Zoom是CSS3规范中@viewport描述符的一部分，如此所述。"

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

用于缩放整个视口（“屏幕”）。在许多浏览器中，它也会缩放单个元素，但并非所有浏览器都是如此。CSS3 指定应使用 transform:scale 来实现这种效果。

http://www.w3.org/TR/css3-transforms/#transform-functions

但它的工作方式与支持此功能的浏览器中的“元素缩放”略有不同。

- commonpike

---

从问题中可以很清楚地看出，你所说的不是“缩放”（zoom）功能。 - BoltClock

是的 :-) 但严格来说，如果问题是“在CSS中zoom有什么作用”，那么这就是根据CSS规范的答案。据我所知，这是唯一官方的缩放方式，因此所有的困惑都来源于此。 - commonpike

Answer 6

只有IE和WebKit支持缩放，理论上它确实能够做到你所说的那样。

试着在图片上尝试一下，看看它的完整效果 :)

- Rudi Visser

---

错误。Zoom在IE、Opera、Safari 4、Chrome和Firefox中都受支持，自3.5版本以来使用-moz-transform: scale(x)。 - user1211577

啊；上次我尝试过，但没有任何效果。CSS3变换并不完全相同，因此Firefox不支持它。也许在其他浏览器中，'缩放'在内部是通过变换来表示的，因为CSS3可以实现这一点。 - Rudi Visser

实际上，从快速测试来看，缩放在Opera中似乎也无法正常工作。所以你的意思是它在IE和WebKit中可以工作。 - Rudi Visser

Answer 7

正如Joshua M所指出的，缩放功能不仅在Firefox上不支持，但你可以简单地进行修复，步骤如下：

div.zoom {
  zoom: 2; /* all browsers */
 -moz-transform: scale(2);  /* Firefox */
}

- Key-Six

---

那是两个完全不同的属性，尽管它们产生类似的结果。你的例子会将其缩小到25%，而不是50%。 - qwerty