Wie kann ich ein HTML-Element in Firefox und Opera zoomen?

82

Wie kann ich ein HTML-Element in Firefox und Opera zoomen?

Die zoomEigenschaft funktioniert in IE, Google Chrome und Safari, aber nicht in Firefox und Opera.

Gibt es eine Methode zum Hinzufügen dieser Eigenschaft zu Firefox und Opera?

css firefox cross-browser zoom opera SABU
quelle
1
Ich verweise Sie auf diese Frage, die Ihre ziemlich gründlich beantwortet.
Ben

Antworten:

80

Versuchen Sie diesen Code, das wird funktionieren:

-moz-transform: scale(2);

Sie können verweisen diese .

Mubeen
quelle
2
Ja, das funktioniert perfekt. Gibt es eine Methode, um -moz-transform Skalierungsfaktor in Prozent zu ändern
Es ist ein Prozentsatz in Dezimalform. (1 = 100% 2 = 200% 0,2 = 20%) Aber ich glaube, Sie können auch die prozentuale Notation verwenden. w3.org/TR/css3-values/#percentages
Sholsinger
45
Das Problem dabei ist, wenn Sie feste Positionselemente haben. Der Zoom funktioniert anders als die Transformationsskala.
Tom Roggero
3
Auch ... was passiert, wenn ff das Zoomen unterstützt? Wird dieser Doppelzoom? Dies scheint nicht die Lösung zu sein.
Cory Mawhorter
Dies funktioniert jedoch nicht mit einem Sprite-Bild, bei dem wir tatsächlich einen bestimmten Teil des Bildes vergrößern müssen.
Colin Rickels
51

Zoom und Transformationsskala sind nicht dasselbe. Sie werden zu unterschiedlichen Zeiten angewendet. Der Zoom wird angewendet, bevor das Rendern erfolgt, transformieren - danach. Das Ergebnis ist, wenn Sie ein Div mit Breite / Höhe = 100% in einem anderen Div mit fester Größe verschachteln. Wenn Sie den Zoom anwenden, wird alles in Ihrem inneren Zoom kleiner oder größer, aber wenn Sie das anwenden, transformieren Sie Ihr gesamtes Das innere Div wird kleiner (obwohl Breite / Höhe auf 100% eingestellt ist, werden sie nach der Transformation nicht 100% sein).

Ilya Volodin
quelle
35

Für mich funktioniert dies, um dem Unterschied zwischen Zoom und Skalentransformation entgegenzuwirken. Passen Sie den gewünschten Ursprung an:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;
Russ K.
quelle
8

Verwenden Sie scalestattdessen! Nach vielen Recherchen und Tests habe ich dieses Plugin erstellt, um es browserübergreifend zu erreichen:

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

Hinweis:

Es wird ein Wrapper mit einer Klasse erstellt scaleContainer. Achten Sie darauf, während Sie Inhalte stylen.


quelle
Sie können dies noch .width($(this).data('originalWidth') * x + borderWidth)
beeindruckender
5 
zoom: 145%;
-moz-transform: scale(1.45);

Verwenden Sie dies, um auf der sicheren Seite zu sein

Divam Gupta
quelle
10
Dies zoomt 2x im Webkit. Faust durch Zoom, Sekunde durch Skala
Ales Ruzicka
5

Ich würde ändern zoomfür transformin allen Fällen , weil, wie sie von anderen Antworten erklärt, sie sind nicht gleichwertig. In meinem Fall war es auch notwendig, transform-originEigentum anzuwenden , um die Gegenstände dort zu platzieren, wo ich wollte.

Das hat bei mir in Chome, Safari und Firefox funktioniert:

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

Es funktioniert nicht in allen Browsern einheitlich. Ich ging zu: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage und fügte Stil für Zoom und -moz-Transformation hinzu. Ich habe den gleichen Code auf Firefox, IE und Chrome ausgeführt und 3 verschiedene Ergebnisse erhalten.

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

Ich habe eine Weile darauf geschworen. Zoom ist definitiv nicht die Lösung, es funktioniert in Chrome, es funktioniert teilweise im IE, aber es bewegt das gesamte HTML-Div, Firefox macht nichts.

Meine Lösung, die für mich funktioniert hat, bestand darin, sowohl eine Skalierung als auch eine Übersetzung zu verwenden, die ursprüngliche Größe und das ursprüngliche Gewicht hinzuzufügen und dann die Größe und das Gewicht des Div selbst festzulegen:

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

Ändern Sie diese offensichtlich an Ihre eigenen Bedürfnisse. Es gab mir das gleiche Ergebnis in allen Browsern.

WtFudgE
quelle
Dies ist die einzig richtige Antwort! Die Skalierung allein lässt die ursprüngliche Größe des Elements unberührt.
Honza Zidek
1

Versuchen Sie diesen Code, um die gesamte Seite in fireFox zu zoomen

-moz-transform: scale(2);

Wenn ich diesen Code verwende, zoomt die gesamte mit y und x skalierte Seite nicht richtig

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

** **.

Sie können Ihre Seite einfach nicht mit CSS in FireFox zoomen

** **.

Rizo
quelle
0

funktioniert das bei dir richtig ::

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

Für mich funktioniert das gut mit IE10, Chrome, Firefox und Safari:

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

Dadurch wird der gesamte Inhalt auf 50% vergrößert.

Stein
quelle
0

Die einzige richtige und W3C-kompatible Antwort lautet: <html> Objekt und Rem. Die Transformation funktioniert nicht richtig, wenn Sie verkleinern (z. B. Skalieren (0,5)).

Verwenden: 

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

und verwenden Sie in Ihrem Code "rem" -Einheit (einschließlich Stile für <body>) anstelle von metrischen Einheiten. "%" s ohne Änderungen. Stellen Sie für alle Hintergründe die Hintergrundgröße ein. Definieren Sie die Schriftgröße für den Textkörper, der von anderen Elementen geerbt wird.

Wenn eine Bedingung auftritt, die einen anderen Zoom als 1.0 auslösen soll, ändern Sie die Schriftgröße für das Tag (über CSS oder JS).

zum Beispiel:

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

Dies entspricht Zoom: 0,5 ohne Probleme in JS mit clientX und Positionierung während Drag-Drop-Ereignissen.

Verwenden Sie "rem" nicht in Medienabfragen.

Sie brauchen wirklich keinen Zoom, aber in einigen Fällen kann die Methode für vorhandene Websites schneller sein.

18C
quelle