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

CssFirefoxCross BrowserZoomingOpera

Css Problem Overview

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

The zoom 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?

Css Solutions

Solution 1 - Css

Try this code, this’ll work:

-moz-transform: scale(2);

You can refer to this.

Solution 2 - Css

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).

Solution 3 - Css

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;

Solution 4 - Css

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:

$(selector).scale(0.5);

note:

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

Solution 5 - Css

zoom: 145%;
-moz-transform: scale(1.45);

use this to be on the safer side

Solution 6 - Css

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:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

Solution 7 - Css

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:

#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.

Solution 8 - Css

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.

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

Solution 9 - Css

try this code to zoom the whole page in fireFox

-moz-transform: scale(2);

if I am using this code, the whole page scaled with y and x scroll not properly zoom

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

> Simply you can't zoom your page using css in fireFox

**

Solution 10 - Css

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);

Solution 11 - Css

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

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

This zooms all content in

to 50%.

Solution 12 - Css

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).

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.

if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or 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.

Don't use "rem" in media queries.

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

Categories
Recommended Css Solutions
Recommended Firefox Solutions
Recommended Cross Browser Solutions
Recommended Zooming Solutions
Recommended Opera Solutions

Previous Solution:

So what exactly does “from __future__ import barry_as_FLUFL” do?

PythonOperators

Next Solution:

Which passwordchar shows a black dot (•) in a winforms textbox?

C#.NetWinformsTextbox

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSABUView Question on Stackoverflow
Solution 1 - CssMubeenView Answer on Stackoverflow
Solution 2 - CssIlya VolodinView Answer on Stackoverflow
Solution 3 - CssRuss K.View Answer on Stackoverflow
Solution 4 - Cssuser669677View Answer on Stackoverflow
Solution 5 - CssDivam GuptaView Answer on Stackoverflow
Solution 6 - CssAlvaroView Answer on Stackoverflow
Solution 7 - CssWtFudgEView Answer on Stackoverflow
Solution 8 - CssRonny ShererView Answer on Stackoverflow
Solution 9 - CssRizwanView Answer on Stackoverflow
Solution 10 - CssT.ToduaView Answer on Stackoverflow
Solution 11 - CssStoneView Answer on Stackoverflow
Solution 12 - Css18CView Answer on Stackoverflow