Comment puis-je zoomer un <div> dans Firefox et Opera?

Question

Comment puis-je zoomer un <div> dans Firefox et Opera?

La propriété zoom fonctionne dans IE, Google Chrome et Safari, mais ne fonctionne pas dans Firefox et Opera.

Existe-t-il une méthode pour ajouter cette propriété à Firefox et à Opera?

Answer 1

Essayez ce code, ça va marcher:

 -moz-transform: scale(2);
 

Vous pouvez vous référer à cela .

Answer 2

Le Zoom et la transformation d'échelle ne sont pas la même chose. Ils sont appliqués à des moments différents. Le Zoom est appliqué avant le rendu qui se passe, transformer - après. Le résultat de ceci est que si vous prenez un div avec largeur/hauteur = 100% imbriquée à l'intérieur d'une autre div, avec une taille fixe, si vous zoomez, tout à l'intérieur de votre intérieur zoom va se réduire, ou à se développer, mais si vous appliquez transformer l'ensemble de votre intérieur div diminuera (même si la largeur/hauteur est réglée à 100%, ils ne vont pas être à 100% après la transformation).

Answer 3

Pour moi, cela fonctionne pour contrer la différence entre le zoom et la transformation d'échelle, ajustez pour l'origine souhaitée souhaitée:

 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

Utilisez plutôt scale ! Après de nombreuses recherches et tests, j'ai réalisé ce plugin pour le réussir:

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

Remarque:

Il créera un wrapper avec une classe scaleContainer . Prenez soin de cela tout en stylant le contenu.

Answer 5

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

utilisez ceci pour être du côté sûr