63

我发现一些 jQuery 插件，在他们的 css 规则中使用了“缩放”描述符，我什至查看了 w3c 网站，发现它是用来放大的，但我该如何实现呢？或者我必须定义一些视口？我如何定义这样的视口？还是我对整个事情都错了？

是否可以像这样使用它

a {
    zoom:1;
}

a:hover {
   zoom:2;
}
4

7 回答 7

67

-moz-transform: scale(x)缩放不包含在 CSS 规范中，但它在 IE、Safari 4、Chrome 中受支持（您可以在 Firefox 3.5 起获得类似的效果）。见这里。

所以，所有浏览器

 zoom: 2;
 zoom: 200%;

会将您的对象放大 2 倍，因此就像将大小加倍。这意味着如果你有

a:hover {
   zoom: 2;
}

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

就像我说的，在 FireFox 3.5+ use-moz-transform: scale(x)中，它做的事情大致相同。

编辑：针对来自 的评论thirtydot，我会说这scale()不是一个完整的替代品。它不会像zoom做的那样线性扩展，而是会扩展开箱即用的内容，而不是强迫其他内容。在此处查看此操作。此外，Opera 似乎zoom不支持。

这篇scale文章对使用 jQuery 解决不兼容性的方法和解决方法提供了有用的见解。

于 2012-04-23T10:34:55.337 回答
38

令人惊讶的是，没有人提到这zoom: 1;对 IE6-7 有用，通过触发hasLayout来解决大多数仅 IE 的错误。

于 2012-04-23T10:49:48.553 回答
3

CSSzoom属性现在得到广泛支持，占浏览器总数的 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>

浏览器支持：caniuse

于 2017-01-06T11:32:06.540 回答
2

此属性控制当前元素的放大级别。元素的渲染效果是相机上的“缩放”功能。即使这个属性没有被继承，它仍然会影响子元素的渲染。

例子

 div { zoom: 200% }
 <div style=”zoom: 200%”&gt;This is x2 text </div>
于 2012-04-23T10:28:03.587 回答
2

zoom 是 @viewport 描述符的 css3 规范，如此处所述

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

用于缩放整个视口（“屏幕”）。它也恰好在许多浏览器中缩放单个元素，但不是全部。css3 指定 transform:scale 应该用来实现这样的效果：

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

但它与那些支持它的浏览器中的“元素缩放”略有不同。

于 2013-05-05T14:39:49.443 回答
1

只有 IE 和 WebKit 支持缩放，是的，理论上它完全符合您的要求。

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

于 2012-04-23T10:27:59.710 回答
-1

正如 Joshua M 指出的那样，缩放功能不仅在 Firefox 中受支持，但您可以简单地修复它，如下所示：

div.zoom {
  zoom: 2; /* all browsers */
 -moz-transform: scale(2);  /* Firefox */
}
于 2012-04-23T10:33:45.487 回答