blocks|key|1105660|text|试试这段代码，它会起作用的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1105661|-moz-transform:+scale(2);|code-block|syntax|javascript|1105662|你可以参考this。|offset|length|1105663|entityMap|0|LINK|mutability|MUTABLE|url|http://www.the-art-of-web.com/css/css-animation/^0|0|0|5|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try this code, this’ll work:

<pre><code>-moz-transform: scale(2);
</code></pre>

You can refer to <a href="http://www.the-art-of-web.com/css/css-animation/" rel="noreferrer">this</a>.

blocks|key|890953|text|缩放和变换比例不是一回事。它们在不同的时间应用。缩放在渲染发生之前应用，transform+-+after。这样做的结果是，如果你使用一个宽度/高度=+100%25嵌套在另一个div中的div，并且大小固定，如果你应用缩放，内部缩放中的所有东西都会收缩或增长，但如果你应用transform，整个内部div将会收缩(即使宽度/高度设置为100%25，转换后它们也不会是100%25+)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|890954|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Zoom and transform scale are not the same thing. They are applied at different times. Zoom is applied before the rendering happens, transform - after. The result of this is if you take a div with width/height = 100% nested inside of another div, with fixed size, if you apply zoom, everything inside your inner zoom will shrink, or grow, but if you apply transform your entire inner div will shrink (even though width/height is set to 100%, they are not going to be 100% after transformation).

blocks|key|891045|text|对我来说，这是为了消除缩放和缩放变换之间的差异，根据所需的原点进行调整：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|891046|zoom:+0.5;
-ms-zoom:+0.5;
-webkit-zoom:+0.5;
-moz-transform:++scale(0.5,0.5);
-moz-transform-origin:+left+center;|code-block|syntax|javascript|891047|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For me this works to counter the difference between zoom and scale transform, adjust for the intended origin desired:

<pre><code>zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
</code></pre>

blocks|key|891060|text|改用scale吧！经过多次研究和测试，我制作了这个插件来实现跨浏览器：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|891061|$.fn.scale+=+function(x)+{
++++if(!$(this).filter(':visible').length+&&+x!=1)return+$(this);
++++if(!$(this).parent().hasClass('scaleContainer')){
++++++++$(this).wrap($('<div+class="scaleContainer">').css('position','relative'));
++++++++$(this).data({
++++++++++++'originalWidth':$(this).width(),
++++++++++++'originalHeight':$(this).height()});
++++}
++++$(this).css({
++++++++'transform':+'scale('%2Bx%2B')',
++++++++'-ms-transform':+'scale('%2Bx%2B')',
++++++++'-moz-transform':+'scale('%2Bx%2B')',
++++++++'-webkit-transform':+'scale('%2Bx%2B')',
++++++++'transform-origin':+'right+bottom',
++++++++'-ms-transform-origin':+'right+bottom',
++++++++'-moz-transform-origin':+'right+bottom',
++++++++'-webkit-transform-origin':+'right+bottom',
++++++++'position':+'absolute',
++++++++'bottom':+'0',
++++++++'right':+'0',
++++});
++++if(x==1)
++++++++$(this).unwrap().css('position','static');else
++++++++++++$(this).parent()
++++++++++++++++.width($(this).data('originalWidth')*x)
++++++++++++++++.height($(this).data('originalHeight')*x);
++++return+$(this);
};|code-block|syntax|javascript|891062|用法：|891063|$(selector).scale(0.5);|891064|注意：|891065|它将创建一个带有类scaleContainer的包装器。在设计内容样式时要注意这一点。|891066|entityMap^0|2|5|0|0|0|0|0|9|E|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

Use <code>scale</code> instead! After many researches and tests I have made this plugin to achieve it cross browser:

<pre><code>$.fn.scale = function(x) {
 if(!$(this).filter(':visible').length &amp;&amp; x!=1)return $(this);
 if(!$(this).parent().hasClass('scaleContainer')){
 $(this).wrap($('&lt;div class="scaleContainer"&gt;').css('position','relative'));
 $(this).data({
 'originalWidth':$(this).width(),
 'originalHeight':$(this).height()});
 }
 $(this).css({
 'transform': 'scale('+x+')',
 '-ms-transform': 'scale('+x+')',
 '-moz-transform': 'scale('+x+')',
 '-webkit-transform': 'scale('+x+')',
 'transform-origin': 'right bottom',
 '-ms-transform-origin': 'right bottom',
 '-moz-transform-origin': 'right bottom',
 '-webkit-transform-origin': 'right bottom',
 'position': 'absolute',
 'bottom': '0',
 'right': '0',
 });
 if(x==1)
 $(this).unwrap().css('position','static');else
 $(this).parent()
 .width($(this).data('originalWidth')*x)
 .height($(this).data('originalHeight')*x);
 return $(this);
};
</code></pre>

usege:

<pre><code>$(selector).scale(0.5);
</code></pre>

note:

It will create a wrapper with a class <code>scaleContainer</code>. Take care of that while styling content.

blocks|key|1105797|text|zoom:+145%25;
-moz-transform:+scale(1.45);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1105798|为了安全起见，请使用此选项|unstyled|1105799|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>zoom: 145%;
-moz-transform: scale(1.45);
</code></pre>

use this to be on the safer side

blocks|key|891117|text|我在所有情况下都会将zoom更改为transform，因为正如其他答案所解释的那样，它们并不等价。在我的例子中，还需要应用transform-origin属性来将项目放置在我想要的位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|891118|这对我在Chome、Safari和Firefox上都很有效：|891119|transform:+scale(0.4);
transform-origin:+top+left;
-moz-transform:+scale(0.4);
-moz-transform-origin:+top+left;|code-block|syntax|javascript|891120|entityMap^0|A|4|H|9|1P|G|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

I would change <code>zoom</code> for <code>transform</code> in all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply <code>transform-origin</code> property to place the items where I wanted.

This worked for me in Chome, Safari and Firefox:

<pre><code>transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
</code></pre>

blocks|key|1105998|text|我对此发誓已有一段时间了。Zoom绝对不是解决方案，它在chrome中工作，它在IE中部分工作，但移动整个html+div，firefox不做任何事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1105999|我的解决方案是同时使用缩放和平移，并添加原始高度和权重，然后设置div本身的高度和权重：|1106000|#miniPreview+{
transform:+translate(-710px,+-1000px)+rotate(0rad)+skewX(0rad)+scale(0.3,+0.3);
transform-origin:+1010px+1429px+0px;
width:+337px;
height:+476px;|code-block|syntax|javascript|1106001|显然，根据您自己的需要对这些进行更改。它在所有浏览器中都得到了相同的结果。|1106002|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I've been swearing at this for a while. Zoom is definitely not the solution, it works in chrome, it works partially in IE but moves the entire html div, firefox doesnt do a thing.
My solution that worked for me was using both a scaling and a translation, and also adding the original height and weight and then setting the height and weight of the div itself:
<pre><code>#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
</code></pre>
Obviously change these to your own needs. It gave me the same result in all browsers.

blocks|key|890830|text|它并不是在所有浏览器中都以统一的方式工作。我转到：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage并添加了缩放和-moz-transform的样式。我在firefox，IE和chrome上运行了相同的代码，得到了3个不同的结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|890831|<html>
<style>
body{zoom:3;-moz-transform:+scale(3);}
</style>
<body>

<h2>Norwegian+Mountain+Trip</h2>
<img+border="0"+src="/images/pulpit.jpg"+alt="Pulpit+rock"++/>

</body>
</html>|code-block|syntax|javascript|890832|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage^0|P|1W|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

It does not work in uniform way in all browsers.
I went to to: <a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage" rel="nofollow">http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage</a> and added style for zoom and -moz-transform. I ran the same code on firefox, IE and chrome and got 3 different results.

<pre><code>&lt;html&gt;
&lt;style&gt;
body{zoom:3;-moz-transform: scale(3);}
&lt;/style&gt;
&lt;body&gt;

&lt;h2&gt;Norwegian Mountain Trip&lt;/h2&gt;
&lt;img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" /&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|1105892|text|这对你来说工作正常吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1105893|zoom:+145%25;
-moz-transform:+scale(1.45);
-webkit-transform:+scale(1.45);
scale(1.45);
transform:+scale(1.45);|code-block|syntax|javascript|1105894|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

does this work correctly for you? : 

<pre><code>zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
</code></pre>

blocks|key|891031|text|对我来说，这在IE10、Chrome、火狐和Safari上都能很好地工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|891032|+++#MyDiv>*
+++{
++++++++zoom:+50%25;
++++++++-moz-transform:+scale(0.5);
++++++++-webkit-transform:+scale(1.0);
+++}|code-block|syntax|javascript|891033|这会将所有内容放大到50%25。|891034|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For me this works well with IE10, Chrome, Firefox and Safari:

<pre><code> #MyDiv&gt;*
 {
 zoom: 50%;
 -moz-transform: scale(0.5);
 -webkit-transform: scale(1.0);
 }
</code></pre>

This zooms all content in to 50%.

blocks|key|891146|text|唯一正确且与W3C兼容的答案是：<html>对象和rem。如果按比例缩小(例如，缩放(0.5))，变换将无法正常工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|891147|使用：|891148|html
{
+++font-size:+1mm;+/*+or+your+favorite+unit+*/
}|code-block|syntax|javascript|891149|并在代码中使用"rem“单位(包括<body>的样式)，而不是公制单位。"%25"s不做任何更改。为所有背景设置背景大小。定义body的font-size，它由其他元素继承。|891150|如果发生任何情况，将触发zoom而不是1.0，请更改标签的字体大小(通过CSS或JS)。|891151|例如：|891152|@media+screen+and+(max-width:320pt)
{
+++html
+++{
++++++font-size:+0.5mm;+
+++}
}|891153|这相当于zoom:0.5，在JS中使用clientX和拖放事件期间的定位是没有问题的。|891154|不要在媒体查询中使用"rem“。|891155|你真的不需要缩放，但在某些情况下，它可以更快的方法为现有的网站。|891156|entityMap^0|G|6|0|0|0|H|6|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1D|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1E|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1F|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|11|$]]

Only correct and W3C compatible answer is: <code>&lt;html&gt;</code> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5). 

Use: 

<pre><code>html
{
 font-size: 1mm; /* or your favorite unit */
}
</code></pre>

and use in your code "rem" unit (including styles for <code>&lt;body&gt;</code>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.

if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).

for example:

<pre><code>@media screen and (max-width:320pt)
{
 html
 {
 font-size: 0.5mm; 
 }
}
</code></pre>

This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events. 

Don't use "rem" in media queries. 

You really doesn't need zoom, but in some cases it can faster method for existing sites.

How can I zoom an HTML element in Firefox and Opera?

The <code>zoom</code> property is working in IE, Google Chrome and Safari, but it’s not working in Firefox and Opera.

Is there any method for adding this property to Firefox and Opera?

How can I zoom an HTML element in Firefox and Opera?

如何在Firefox和Opera中缩放HTML元素？zoom属性在IE、Google Chrome和Safari中有效，但在火狐和Opera中不起作用。有什么方法可以将这个属性添加到Firefox和Opera中吗？

问如何在Firefox和Opera中缩放HTML元素？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Firefox和Opera中缩放HTML元素？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Firefox和Opera中缩放HTML元素？
EN