it-swarm.com.de

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

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

Die zoom-Eigenschaft 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?

72
SABU

Probieren Sie diesen Code aus, das funktioniert:

-moz-transform: scale(2);

Sie können sich auf this beziehen.

74
Mubeen

Zoom und Transformationsmaßstab sind nicht dasselbe. Sie werden zu unterschiedlichen Zeiten angewendet. Der Zoom wird angewendet, bevor das Rendern stattfindet. Das Ergebnis davon ist, wenn Sie ein div mit width/height = 100% innerhalb eines anderen div mit fester Größe verschachteln. Wenn Sie den Zoom anwenden, wird alles in Ihrem inneren Zoom verkleinert oder größer, aber wenn Sie den Effekt anwenden, transformieren Sie den gesamten inner div wird schrumpfen (obwohl width/height auf 100% gesetzt ist, werden sie nach der Transformation nicht 100% sein).

46
Ilya Volodin

Für mich funktioniert das, um den Unterschied zwischen Zoom- und Skalentransformation zu kompensieren, und zwar für den beabsichtigten gewünschten Ursprung:

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.

Verwenden Sie stattdessen scale! Nach vielen Recherchen und Tests habe ich dieses Plugin so erstellt, dass es browserübergreifend ist:

$.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 der Klasse scaleContainer erstellt. Achten Sie darauf, während Sie Inhalte gestalten.

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

verwenden Sie dies, um auf der sicheren Seite zu sein

4
Divam Gupta

Ich würde zoom für transform in allen Fällen ändern, da sie, wie andere Antworten erklären, nicht gleichwertig sind. In meinem Fall war es auch notwendig, die transform-Origin-Eigenschaft anzuwenden, um die Artikel dort zu platzieren, wo ich sie haben wollte.

Dies funktionierte für mich in Chome, Safari und Firefox:

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

versuchen Sie diesen Code, um die gesamte Seite in Firefox zu vergrößern

-moz-transform: scale(2);

wenn ich diesen Code verwende, wird die gesamte mit y und x skalierte Seite nicht richtig gezoomt

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

**

Sie können Ihre Seite mit CSS in Firefox einfach nicht vergrößern

**

1
Rizo

Es funktioniert nicht einheitlich in allen Browsern. Ich ging zu: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage und fügte Stil für Zoom und -moz hinzu -verwandeln. Ich habe den gleichen Code auf Firefox, IE und Chrome ausgeführt und habe 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>
1
Ronny Sherer

Nur eine korrekte und W3C-kompatible Antwort ist: <html> object und rem. Die Umwandlung funktioniert nicht korrekt, wenn Sie die Größe reduzieren (z. B. Maßstab (0,5)). 

Benutzen: 

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. Für alle Hintergründe die Hintergrundgröße einstellen. Definiert die Schriftgröße für den Kö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 manchen Fällen kann die Methode für vorhandene Websites schneller sein. 

0
18C

funktioniert das richtig für dich? : 

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

Ich schwöre schon eine Weile darauf. Zoom ist definitiv nicht die Lösung, es funktioniert in Chrom, funktioniert teilweise in IE, verschiebt jedoch das gesamte HTML-Div, firefox macht nichts.

Meine Lösung, die für mich funktioniert hat, war die Verwendung einer Skalierung und einer Übersetzung. Außerdem wurden die ursprüngliche Größe und das Gewicht hinzugefügt und dann die Höhe und das Gewicht des Divs selbst festgelegt:

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

Offensichtlich ändern Sie diese an Ihre eigenen Bedürfnisse. Es gab mir in allen Browsern dasselbe Ergebnis.

0
WtFudgE

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);
   }

Dies vergrößert den gesamten Inhalt auf 50%.

0
Stone