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