web-dev-qa-db-fra.com

Comment puis-je zoomer un élément HTML dans Firefox et Opera?

Comment puis-je zoomer un élément HTML 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?

cssfirefoxcross-browserzoomopera
72
SABU

Essayez ce code, ça va marcher:

-moz-transform: scale(2);

Vous pouvez vous référer à this .

74
Mubeen

Zoom et transformer l'échelle ne sont pas la même chose. Ils sont appliqués à des moments différents. Le zoom est appliqué avant le rendu, transformation - après. Le résultat est que si vous prenez une div avec une largeur/hauteur = 100% imbriquée dans une autre div, avec une taille fixe, si vous appliquez un zoom, tout ce qui se trouve dans votre zoom interne diminuera ou s'agrandira, mais si vous appliquez une transformation complète de votre zoom interne. div interne réduit (même si largeur/hauteur est définie sur 100%, elles ne seront pas à 100% après transformation).

46
Ilya Volodin

Pour moi, cela fonctionne pour contrer la différence entre le zoom et la transformation d'échelle, ajustez-le en fonction de l'origine 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;
31
Russ K.

Utilisez scale à la place! 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 va créer un wrapper avec une classe scaleContainer. Prenez soin de cela tout en stylant le contenu.

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

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

4
Divam Gupta

Je changerais zoom pour transform dans tous les cas parce que, comme expliqué par d'autres réponses, elles ne sont pas équivalentes. Dans mon cas, il était également nécessaire d'appliquer la propriété transform-Origin pour placer les éléments où je voulais.

Cela a fonctionné pour moi dans Chome, Safari et Firefox:

transform: scale(0.4);
transform-Origin: top left;
-moz-transform: scale(0.4);
-moz-transform-Origin: top left;
4
Alvaro

essayez ce code pour agrandir toute la page dans fireFox

-moz-transform: scale(2);

si j'utilise ce code, la page entière mise à l'échelle avec y et x ne défile pas correctement

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

**

Simplement, vous ne pouvez pas zoomer votre page en utilisant CSS dans FireFox

**

1
Rizo

Cela ne fonctionne pas de manière uniforme dans tous les navigateurs . Je suis allé à: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage et j'ai ajouté du style pour le zoom et -moz-transform. J'ai exécuté le même code sur Firefox, IE et Chrome, et obtenu 3 résultats différents.

<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>
1
Ronny Sherer

Seule la réponse correcte et compatible avec le W3C est: <html> object and rem. la transformation ne fonctionne pas correctement si vous réduisez (par exemple, l'échelle (0.5). 

Utilisation: 

html
{
   font-size: 1mm; /* or your favorite unit */
}

et utilisez dans votre code "rem" unité (y compris les styles pour <body>) à la place des unités métriques. "%" s sans modifications. Pour tous les arrière-plans, définissez la taille de l'arrière-plan. Définit la taille de la police pour body, héritée par d'autres éléments.

si une condition survient qui nécessite un zoom autre que 1.0, changez la taille de la police pour la balise (via CSS ou JS).

par exemple:

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

Cela équivaut au zoom: 0.5 sans problème dans JS avec clientX et au positionnement lors des événements glisser-déposer. 

Ne pas utiliser "rem" dans les requêtes de médias. 

Vous n'avez vraiment pas besoin de zoom, mais dans certains cas, cette méthode peut être plus rapide pour les sites existants. 

0
18C

cela fonctionne-t-il correctement pour vous? : 

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
0
T.Todua

Je jure depuis un moment. Le zoom n’est définitivement pas la solution, il fonctionne en chrome, il fonctionne partiellement dans IE mais déplace l’ensemble du div en html, firefox ne fait rien.

Ma solution qui a fonctionné pour moi utilisait à la fois une mise à l'échelle et une translation, en ajoutant la taille et le poids d'origine, puis en définissant la taille et le poids de la div elle-même:

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-Origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

Évidemment, changez-les selon vos propres besoins. Cela m'a donné le même résultat dans tous les navigateurs.

0
WtFudgE

Pour moi, cela fonctionne bien avec IE10, Chrome, Firefox et Safari:

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

Ceci agrandit tout le contenu à 50%.

0
Stone