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

Question

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

该zoom物业正在IE,谷歌浏览器和Safari中工作,但它不适用于Firefox和Opera.

是否有任何方法可以将此属性添加到Firefox和Opera？

Answer 1

试试这个代码,这个工作:

-moz-transform: scale(2);

你可以参考这个.

Answer 2

缩放和变换比例不是一回事.它们在不同时间应用.在渲染发生之前应用缩放,转换 - 之后.这样做的结果是如果你把一个宽度/高度= 100%的div嵌套在另一个div中,固定大小,如果你应用缩放,内部缩放内的所有东西都会缩小或增长,但如果你应用变换你的整个内部div将缩小(即使宽度/高度设置为100%,转换后它们也不会是100%).

Answer 3

对我来说,这可以抵消缩放和缩放变换之间的差异,调整所需的目标原点:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

Answer 4

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

注意:

它将创建一个包含类的包装器scaleContainer.在设计内容时要注意这一点.

Answer 5

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

使用它来更安全

Answer 6

我会在所有情况下更改zoom为transform，因为正如其他答案所解释的那样，它们并不等效。在我的情况下，还需要应用transform-origin属性将物品放置在我想要的地方。

这在 Chome、Safari 和 Firefox 中对我有用：

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