DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die zoom-Eigenschaft in CSS ermöglicht es Ihnen, Ihre Inhalte zu skalieren. Sie ist nicht standardisiert und wurde ursprünglich nur im Internet Explorer implementiert. Obwohl mehrere andere Browser jetzt zoom unterstützen, wird sie für Produktions-Websites nicht empfohlen.
.zoom {
zoom: 150%;
}Die unterstützten Werte sind:
percentage– Skalieren um diesen Prozentsatznumber– In Prozent umwandeln und skalieren – 1 == 100 %; 1,5 == 150 %;normal– zoom: 1;
Wenn Ihr Browser dies unterstützt, sehen Sie diese Bilder in verschiedenen Größen.
Zoom ist eine alte IE-Sache. Sie sollten sie nicht auf Live-Websites verwenden. Wenn Sie Inhalte skalieren möchten, verwenden Sie CSS Transforms. Sie können auch Filter verwenden, wenn Sie OldIE-Unterstützung benötigen.
In den Tagen von IE6 wurde zoom hauptsächlich als Hack verwendet. Viele Rendering-Fehler sowohl in IE6 als auch in IE7 konnten mit zoom behoben werden. Zum Beispiel funktionierte display: inline-block in IE6/7 nicht sehr gut. Das Setzen von zoom: 1 löste das Problem. Der Fehler hatte mit der Art und Weise zu tun, wie IE sein Layout rendert. Das Setzen von zoom: 1 aktivierte eine interne Eigenschaft namens hasLayout, die das Problem behob.
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 4.0+ | Keine | Keine | 5.5+ | TBD | TBD |
Safari unterstützt zoom seit Version 4. Es hat jedoch einen neuen Wert hinzugefügt: reset. Das weist den Browser an, Ihr Element beim Zoomen nicht zu zoomen. Also Ihr cmd/ctrl+? Es funktioniert nicht bei Elementen, auf die zoom: reset angewendet wurde.
Wie kann ich ein Bild auf einem beweglichen Banner, der mit jQuery mit CSS erstellt wurde, platzieren?
Nun, Vikram, das ist der falsche Ort, um diese Frage zu stellen, Sie können sie in einem Forum stellen :) Aber was Ihre Lösung betrifft, ist es gut, dem Div eine Position zuzuweisen und es über das Bild zu legen, dem Bild einen z-index-Wert zuzuweisen, der kleiner ist als der z-index-Wert des Div, und das Div wird oben auf dem beweglichen Banner angezeigt :)
Ich hoffe, das hilft Ihnen.
Wenn nicht, mailen Sie mir die Dateien, ich werde sie für Sie codieren :)
Viele Grüße...
Ah, Entschuldigung, ich meinte umgekehrt mit dem z-index :)
Geben Sie dem Bild einen höheren z-index-Wert als dem Div.
d. h.
.img {z-index:1000}
#div {z-index:10}
Viele Grüße...
Hallo, ich habe ein Problem mit iframes. Ich habe einen iframe in ein Div eingebunden, und das Div hat eine feste Breite, wie unten:
In diesem Fall passt mein iframe nicht in mein Div, es wird von rechts abgeschnitten, und ich möchte keine Scrollleiste verwenden.
Wie sollte ich zoom verwenden?
Es ist einfach, Sie sollten es nicht tun :D
Stimmt. Wenn ich den Artikel zitiere:
Da Firefox und Opera es überhaupt nicht unterstützen und jede Verwendung von
zoomziemlich layout- oder displaykritisch wäre, ist es sicherlich keine gute Idee, es überhaupt zu verwenden.Ich habe festgestellt, dass zoom praktisch ist, wenn Sie eine Funktion zur Nachahmung des Seiten-Zooms (rein und raus) wünschen, wie wenn Sie Command/Control-Minus und Command/Control-Plus drücken. Sie können es auf das HTML-Element anwenden und es über JavaScript steuern. Soweit ich weiß, gibt es keine Möglichkeit, dies über Transformationen zu tun. Es muss jedoch eine Art progressive Enhancement sein, da es nur in Webkit/Blink-Browsern (Safari, Chrome, Opera, Maxthon) funktioniert. Es funktioniert nicht in IE oder Firefox.
Am besten nicht verwenden, da Browser wie Firefox und Opera ziemlich beliebt sind und Sie nicht möchten, dass Ihre Seite kaputt geht. Das gesagt, verwende ich es (sparsam), wenn ich Websites für Mobilgeräte konvertiere. Insbesondere bei Elementen, deren Hintergrundbilder Sprites sind. Es ist ehrlich gesagt Faulheit, aber es ist eine schnelle Lösung. Warum sollte es auf Mobilgeräten in Ordnung sein? Weil die beiden beliebtesten Browser auf Mobilgeräten es unterstützen (Chrome und Safari). Aber auch hier gilt: Wenn Sie es vermeiden können, tun Sie es. Verwenden Sie es im unteren Bereich, in dem Sie wissen, dass der Bildschirm nur mobil ist, z. B. @media
Aber auf jeden Fall, das wäre mein Ansatz.
Chrome (27.0), Opera (15.0) unterstützt zoom: reset
1.5 == 150%;
Einige Websites passen nicht auf einen CRT-Bildschirm (Design bricht ab), während sie auf einem LCD/Laptop-Bildschirm passen. Gibt es eine Idee, dieses Problem zu beheben? Die Auflösung ist in Ordnung... und wenn ich auf CRT negativ zoome, sieht es einigermaßen in Ordnung aus.
Ich habe ein anderes Problem mit zoom in IE.
Ich verwende jQuery-Animationen auf der Seite und benötige eine minimale Höhe und Breite der Seite, damit der Inhalt nicht mit dem Header darüber überlappt. Daher habe ich für Bildschirme mit geringerer Auflösung (weniger als 1150 breit) zoom auf 0,075 für das Div gesetzt, das die Animation enthält.
Das funktioniert in anderen Browsern perfekt, aber in IE wird der Inhalt gequetscht, um 75 % des Bildschirmplatzes einzunehmen, aber in anderen Browsern nimmt der Inhalt die gesamte Bildschirmbreite ein, aber die Fläche wird um 125 % erhöht.
Haben Sie Vorschläge, wie man das beheben kann?
http://www.xirrus.com/
Ist jemand bereit, mich persönlich zu betreuen, wenn ich dieses Thema kaufe? Ich bin bereit, für den Service zu bezahlen, wenn er bezahlbar ist.
Ihre Bilder sind kaputt, der Dienst hat ein Problem bei der Bereitstellung von Bildern.
Bilder in der Demo sind verschwunden.
Ich stimme nicht zu, dass zoom nicht auf Live-Webseiten verwendet werden sollte. Es sollte verwendet werden, aber mit transform: scale als Fallback. Warum? Weil in der WebKit-Engine die zoom-Eigenschaft Inhalte wie Vektorgrafiken skaliert und transform: scale wie auf Rastergrafiken wirkt, was sehr hässlich aussieht, wenn wir Inhalte vergrößern.
Wir sollten also zoom für WebKit und Trident und transform: scale für den Rest verwenden.
Kann mir jemand helfen, eine Webseite auf verschiedenen Monitorgrößen und Browsern zu zentrieren? Wenn ich den Browser auf 110% zoome, sieht es auf einem 24-Zoll-Monitor perfekt aus, und wenn ich auf 90% zoome, sieht es auf einem 19-Zoll-Monitor perfekt aus. Kann dies in den CSS-Code aufgenommen werden? Vielen Dank im Voraus.
.effect:hover img {
transition: all 0.4s ease-in-out 0s;
opacity: 0.7;
-moz-transform: scale(1,2);
-webkit-transform: scale(50%,50%);
-o-transform: scale(2,2);
-ms-transform: scale(2,2);
transform: scale(2,2);
}
Skalieren Sie nach diesem Prozentsatz.
Zahl –
1.0 == 100%;
1.5 == 150%;
standardmäßig normal – zoom: 1;
Kann mir jemand sagen, welche Zoom-Option es für Firefox gibt... BITTE?
Sie müssen transform scale für die Firefox-Unterstützung verwenden. Sie können es so versuchen:
-moz-transform: scale(1.3);
Hier ist ein Artikel, den ich mit detaillierter Erklärung gefunden habe: http://codeconvey.com/css-zoom-effect-using-scale-and-transition/
Ist es möglich, "zoom: reset" zurückzusetzen? Ich möchte, dass das Elternelement nicht gezoomt wird, aber die Kindelemente gezoomt werden?
Wie man ein Dreizeilenmenü von Grund auf neu erstellt,
und dieses Menü sollte responsiv sein und sich entsprechend der Größenänderung des Browsers ändern.
Hallo! Ist es möglich, ein Formular per E-Mail zu posten?
"zoom: reset;" funktioniert nicht für IE.
Gibt es ein Äquivalent dafür?
Das funktioniert nicht…… :(
Ich möchte nur ein hoverbares Bild erstellen. Bitte helfen Sie mir...
Ich habe diesen Mist versucht, ich habe es verdammt schwer versucht, ich bin nicht weit gekommen, aber das spielt keine Rolle.
Zoom ist manchmal der beste Weg, um die Seite zu vergrößern. Leider ist es kein CSS-Standard, aber ich hoffe, es wird es bald sein.
transform: scale() verhält sich ganz anders: Wenn Sie zum Beispiel die gesamte Seite vergrößern möchten, werden mehr Ränder darum herum erstellt. Zoom vergrößert jedes Ding auf die richtige Weise, wie das Browser-Ctrl+-Rad-Verhalten: Ich denke, sie ergänzen sich und manchmal ist das eine, manchmal das andere nötig. Ich hoffe, zukünftige CSS-Implementierungen ermöglichen die Verwendung beider, jeweils mit ihrem eigenen Verhalten.
Ist dies auf einem Multitouch-Bildschirm aktiviert?
"zoom" ist ein Faktor, der auf Schriftgrößen, Bildgrößen und den Inhalt im Allgemeinen angewendet wird, während die tatsächliche Breite des Inhalts erhalten bleibt und Text umgebrochen und nach unten verschoben wird. Es simuliert zum Beispiel das Zoomen auf der Seite (Strg +).
"transform" wendet eine beliebige affine Transformation ausschließlich auf das Element während des Renderings an; daher sieht das Elternelement es als gleich groß an. Und beim Hochskalieren behält es NICHT die gleiche Breite bei oder bewirkt, dass Text umbricht, sondern überschreitet die Grenzen des Elternelements.
Gibt es einen Grund, warum zoom nicht in der Produktion verwendet werden sollte, abgesehen davon, dass es nicht standardisiert ist? Ich sehe nicht, wie transform das tun kann, was zoom tut. Was sind mögliche Konsequenzen, wenn zoom in der Produktion verwendet wird?
Dasselbe kann für andere Browser mit diesem erreicht werden
transform: scale(0.34);
margin: -12px -6px -6px -20px;
Hallo!
Wenn ich all das lese und nach einer Möglichkeit suche, meine Seitenbreite: 1280 in einen mobilen Android-Browser Breite: 360 und Höhe: 640 zu passen.
Ich dachte daran, index.htm in ein iframe width:100% (auch in Tabelle?) zu setzen und das iframe 360.htm aufzurufen und jede Browserauflösung, die niedriger als 361 ist, an 360.htm weiterzuleiten.
Ich hoffe auch, dass ein iframe gezoomt und um 90 Grad gedreht werden kann (oder den Querformatmodus erzwingen) und das iframe 640.htm aufrufen kann.
Das gesagt: Ich werde einige experimentelle Fixes und Tricks anwenden, um die Regeln mobiler Browser zu brechen, lol