CSS 如何在 Firefox 和 Opera 中缩放 HTML 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4049342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I zoom an HTML element in Firefox and Opera?
提问by SABU
How can I zoom an HTML element in Firefox and Opera?
如何在 Firefox 和 Opera 中缩放 HTML 元素？
The zoomproperty is working in IE, Google Chrome and Safari, but it's not working in Firefox and Opera.
该zoom属性适用于 IE、Google Chrome 和 Safari，但不适用于 Firefox 和 Opera。
Is there any method for adding this property to Firefox and Opera?
是否有任何方法可以将此属性添加到 Firefox 和 Opera？
采纳答案by Mubeen
回答by Ilya Volodin
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).
缩放和变换比例不是一回事。它们在不同的时间应用。在渲染发生之前应用缩放，变换之后。这样做的结果是，如果您将宽度/高度 = 100% 的 div 嵌套在另一个具有固定大小的 div 内，如果您应用缩放，则内部缩放内的所有内容都会缩小或增长，但是如果您应用变换整个内部 div 会缩小（即使宽度/高度设置为 100%，转换后它们也不会是 100%）。
回答by Russ K.
For me this works to counter the difference between zoom and scale transform, adjust for the intended origin desired:
对我来说，这可以抵消缩放和缩放变换之间的差异，调整所需的预期原点：
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
回答by Russ K.
Use scaleinstead! After many researches and tests I have made this plugin to achieve it cross browser:
使用scale，而不是！经过多次研究和测试，我制作了这个插件来实现跨浏览器：
$.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('+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);
};
usege:
用途：
$(selector).scale(0.5);
note:
笔记：
It will create a wrapper with a class scaleContainer. Take care of that while styling content.
它将创建一个带有 class 的包装器scaleContainer。在设计内容时要注意这一点。
回答by Alvaro
I would change zoomfor transformin all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply transform-originproperty to place the items where I wanted.
我会在所有情况下更改zoom为transform，因为正如其他答案所解释的那样，它们并不等效。在我的情况下，还需要应用transform-origin属性来放置我想要的物品。
This worked for me in Chome, Safari and Firefox:
这在 Chome、Safari 和 Firefox 中对我有用：
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
回答by Divam Gupta
zoom: 145%;
-moz-transform: scale(1.45);
use this to be on the safer side
使用它来更安全
回答by Rizo
try this code to zoom the whole page in fireFox
尝试使用此代码在 fireFox 中缩放整个页面
-moz-transform: scale(2);
if I am using this code, the whole page scaled with y and x scroll not properly zoom
如果我使用此代码，则使用 y 和 x 滚动缩放的整个页面无法正确缩放
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
**
Simply you can't zoom your page using css in fireFox
只是您无法在 fireFox 中使用 css 缩放页面
**
**
回答by Ronny Sherer
It does not work in uniform way in all browsers. I went to to: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimageand added style for zoom and -moz-transform. I ran the same code on firefox, IE and chrome and got 3 different results.
它并非在所有浏览器中都以统一的方式工作。我去了：http: //www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage 并添加了缩放和-moz-transform 的样式。我在 Firefox、IE 和 chrome 上运行了相同的代码，得到了 3 个不同的结果。
<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>
回答by T.Todua
does this work correctly for you? :
这对你有用吗？：
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
回答by Stone
For me this works well with IE10, Chrome, Firefox and Safari:
对我来说，这适用于 IE10、Chrome、Firefox 和 Safari：
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
This zooms all content in to 50%.
这会将所有内容放大到 50%。
