How can I zoom an HTML element in Firefox and Opera?
Try this code, this’ll work:
-moz-transform: scale(2);
You can refer to this.
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).
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;
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.