How can I zoom an HTML element in Firefox and Opera?
如何缩放Firefox和Opera中的HTML元素?
The zoom property is working in IE, Google Chrome and Safari, but it’s not working in Firefox and Opera.
zoom属性可以在IE、谷歌Chrome和Safari中工作，但在Firefox和Opera中不能工作。
Is there any method for adding this property to Firefox and Opera?
是否有方法将此属性添加到Firefox和Opera中?
11 个解决方案
#1
72
Try this code, this’ll work:
试试这个代码，它就能工作:
-moz-transform: scale(2);
You can refer to this.
你可以参考这个。
#2
40
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).
缩放和变换缩放不是一回事。它们在不同的时间被应用。缩放是在渲染发生之前，转换之后。这样做的结果是如果你带一个div宽/高嵌套在另一个div = 100%,固定大小,如果你运用变焦,一切在你内心的放大缩小,或成长,但如果你应用变换整个内部div将收缩(尽管宽度/高度设置为100%,他们不会转换后是100%)。
#3
27
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;
#4
7
Use scale instead! After many researches and tests I have made this plugin to achieve it cross browser:
使用规模而不是!经过很多研究和测试，我做了这个插件来实现它的跨浏览器:
$.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:
usege:
$(selector).scale(0.5);
note:
注意:
It will create a wrapper with a class scaleContainer. Take care of that while styling content.
它将使用类scaleContainer创建一个包装器。在样式化内容时要注意这一点。
#5
4
zoom: 145%;
-moz-transform: scale(1.45);
use this to be on the safer side
为了安全起见，用这个
#6
3
I would change zoom for transform in all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply transform-origin property to place the items where I wanted.
我将在所有情况下改变缩放变换，因为，正如其他答案所解释的，它们不是等价的。在我的情况下，也有必要应用变形源属性来放置我想要的物品。
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;
#7
1
It does not work in uniform way in all browsers. I went to to: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage and 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?文件名=tryhtml_pulpitimage并添加了缩放和- mozilla -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>
#8
0
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);
#9
0
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%。
#10
0
I've been swearing at this for a while. Zoom is definitely not the solutions, it works in chrome, it works partially in IE but moves the entire html div, firefox doesnt do a thing.
我发誓已经有一段时间了。Zoom绝对不是解决方案，它在chrome中工作，部分在IE中工作，但是移动整个html div, firefox什么都不做。
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:
我的解决方案是使用缩放和平移，同时增加原始的高度和重量，然后设置div的高度和重量:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Obviously change these to your own needs. It gave me the same result in all browsers.
显然，要根据你自己的需要来改变这些。它在所有浏览器中都给出了相同的结果。
#11
0
Only correct and W3C compatible answer is: <html> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5).
只有正确的和W3C兼容的答案是:对象和rem. transformation如果按比例缩小(例如scale(0.5))就不能正确地工作。
Use:
使用:
html
{
font-size: 1mm; /* or your favorite unit */
}
and use in your code "rem" unit (including styles for <body>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.
在代码“rem”单元中使用(包括的样式)，而不是使用公制单元。“%”年代没有变化。为所有背景设置背景尺寸。为body定义字体大小，由其他元素继承。
if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).
如果有任何情况发生，将触发除1.0之外的缩放，改变标签的字体大小(通过CSS或JS)。
for example:
例如:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events.
这相当于缩放:0.5，在使用clientX的JS和拖放事件期间的定位时没有问题。
Don't use "rem" in media queries.
不要在媒体查询中使用“rem”。
You really doesn't need zoom, but in some cases it can faster method for existing sites.
你真的不需要变焦，但在某些情况下，它可以更快地为现有网站提供方法。
#1
72
Try this code, this’ll work:
试试这个代码，它就能工作:
-moz-transform: scale(2);
You can refer to this.
你可以参考这个。
#2
40
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).
缩放和变换缩放不是一回事。它们在不同的时间被应用。缩放是在渲染发生之前，转换之后。这样做的结果是如果你带一个div宽/高嵌套在另一个div = 100%,固定大小,如果你运用变焦,一切在你内心的放大缩小,或成长,但如果你应用变换整个内部div将收缩(尽管宽度/高度设置为100%,他们不会转换后是100%)。
#3
27
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;
#4
7
Use scale instead! After many researches and tests I have made this plugin to achieve it cross browser:
使用规模而不是!经过很多研究和测试，我做了这个插件来实现它的跨浏览器:
$.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:
usege:
$(selector).scale(0.5);
note:
注意:
It will create a wrapper with a class scaleContainer. Take care of that while styling content.
它将使用类scaleContainer创建一个包装器。在样式化内容时要注意这一点。
#5
4
zoom: 145%;
-moz-transform: scale(1.45);
use this to be on the safer side
为了安全起见，用这个
#6
3
I would change zoom for transform in all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply transform-origin property to place the items where I wanted.
我将在所有情况下改变缩放变换，因为，正如其他答案所解释的，它们不是等价的。在我的情况下，也有必要应用变形源属性来放置我想要的物品。
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;
#7
1
It does not work in uniform way in all browsers. I went to to: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage and 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?文件名=tryhtml_pulpitimage并添加了缩放和- mozilla -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>
#8
0
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);
#9
0
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%。
#10
0
I've been swearing at this for a while. Zoom is definitely not the solutions, it works in chrome, it works partially in IE but moves the entire html div, firefox doesnt do a thing.
我发誓已经有一段时间了。Zoom绝对不是解决方案，它在chrome中工作，部分在IE中工作，但是移动整个html div, firefox什么都不做。
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:
我的解决方案是使用缩放和平移，同时增加原始的高度和重量，然后设置div的高度和重量:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Obviously change these to your own needs. It gave me the same result in all browsers.
显然，要根据你自己的需要来改变这些。它在所有浏览器中都给出了相同的结果。
#11
0
Only correct and W3C compatible answer is: <html> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5).
只有正确的和W3C兼容的答案是:对象和rem. transformation如果按比例缩小(例如scale(0.5))就不能正确地工作。
Use:
使用:
html
{
font-size: 1mm; /* or your favorite unit */
}
and use in your code "rem" unit (including styles for <body>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.
在代码“rem”单元中使用(包括的样式)，而不是使用公制单元。“%”年代没有变化。为所有背景设置背景尺寸。为body定义字体大小，由其他元素继承。
if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).
如果有任何情况发生，将触发除1.0之外的缩放，改变标签的字体大小(通过CSS或JS)。
for example:
例如:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events.
这相当于缩放:0.5，在使用clientX的JS和拖放事件期间的定位时没有问题。
Don't use "rem" in media queries.
不要在媒体查询中使用“rem”。
You really doesn't need zoom, but in some cases it can faster method for existing sites.
你真的不需要变焦，但在某些情况下，它可以更快地为现有网站提供方法。