Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: zoom, Kategorien: Bildschirm­darstellung (allgemein), Device Adaptation (CSS 3)

Vergrößerungsfaktor

Steuert den Vergrößerungsfaktor/Zoom-Faktor für die Darstellung.

CSS-Eigenschaft: zoom
KurzbeschreibungWerteStandardwertKategorieHinweis
Vergrößerungsfaktor
  • <number>
  • <percentage>
auto
Allgemein:
Bildschirm­darstellung
CSS 3:
Device Adaptation
Neu in CSS 3
 

Folgendes ist beim Einsatz von zoom zu beachten:

  • zoom steuert die Vergrößerung eines HTML-Elements. Die Eigenschaft ist kein Teil des offiziellen W3C-Standards. Allerdings darf sie in einer CSS-Referenz nicht fehlen, da sie für den Alltag und dem Handling von Internet Explorer Darstellungsproblemen essentiell ist.
  • zoom in Internet Explorer:
    • In dem Zusammenhang ist die das hasLayout des IE relevant. Nicht alle HTML-Elemente haben die Eigenschaft hasLayout. Ohne dieses haben sie keine eigene Breite oder Höhe, noch eine eigene Positionierung. Dadurch geschieht es im IE je nach Kontext, dass Elemente nicht angezeigt werden oder sich wie ein Inline-Element verhalten.
    • Über zoom: 1 wird dieses hasLayout getriggert, ein Element bekommt eigene Dimensionen, es wird korrekt angezeigt. Es ist also nicht die eigentliche Vergrößerung, die man sich hier zu Nutzen macht, sondern den Effekt auf das interne Rendering im IE.
    • Ein vergleichbarer Effekt kann auch über die Eigenschaften position: relative, height: 1px (IE6) oder min-heigth: 1px (IE7) getriggert werden, das gemeinsame ist, dass immer das hasLayout aktiviert wird.
    • Von daher ist zoom bislang eher als Hack eingesetzt worden, als dass man die Eigenschaft wirklich zum Vergrößern von Elementen genutzt hat.
  • zoom als CSS3 Eigenschaft:
    • Das W3C diskutiert unter dem Modul-Namen css3 device adaptation neue CSS-Eigenschaften, die vor allem auf mobile Endgeräte abzielen. Der Status des W3C-Dokuments ist aktuell (Dezember 2012) Editor's Draft, sodass dieser Teil des Standards ohne jegliche Verbindlichkeit ist und von größeren Änderungen betroffen sein kann.
    • Im Gegensatz zu den anderen Eigenschaften auf dem Bereich css3 device adaptation kann man bei zoom allerdings davon ausgehen, dass diese Eigenschaft Teil vom CSS3 Standard wird. Einerseits aufgrund der vollständigen Unterstützung durch den Internet Explorer, aber auch Safari und Chrome unterstützen diese Eigenschaft bereits.
    • Alternativ besteht je nach Browser über transform und dem Wert scale() die Möglichkeit, HMTL-Elemente zu skalieren, also zu zoomen.
  • zoom erwartet Werte als Zahl oder Prozentangabe. 1.0 entspricht dabei 100% und entspricht der 1:1-Darstellung. Werte über 1.0 vergrößern ein Element, unter 1.0 verkleinert Elemente.
  • zoom wirk sich auf das komplette HTML-Element einschließlich Schriftgrößen, Innenabstände und Rahmenstärke.
  • Obwohl zoom im IE bereits seit Versionen implementiert ist, zeigt der IE8 die Vergrößerung fehlerhaft dar. Hintergrundinformationen unter http://haslayout.net/haslayout. Ab der Version 9 wird zoom jedoch wieder sauber dargestellt.
Browserunterstützung von zoom
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
n
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
wj
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
n

Hinweis

Die CSS-Eigenschaften aus dem Bereich css3 device adaptation werden beim W3C noch diskutiert. Es ist nicht sicher, ob diese Teil des offiziellen W3C-Standards werden, ebenfalls können Eigenschaften verändert werden oder auch komplett entfallen.

Weiterführende Informationen zu zoom:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    z-index


Beispiele

HTML:

<div id="example-1">zoom</div>

CSS:

div {
    border: 1px solid #333;
    background-color: #FF8000;
    padding: 20px;
    width: 50px;
    height: 50px;
    font-size: 16px;
}
/* Anweisungen für alle Beispiele. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

zoom
 

HTML:

<div id="example-2">zoom</div>

CSS:

#example-2 {
    zoom: 2.5;
}
Beispiel nur für: Internet ExplorerSafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

zoom
 

HTML:

<div id="example-3">zoom</div>

CSS:

#example-3 {
    zoom: 0.75;
}
Beispiel nur für: Internet ExplorerSafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

zoom
 

HTML:

<div id="example-4">zoom</div>

CSS:

#example-4 {
    zoom: 200%;
}
Beispiel nur für: Internet ExplorerSafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

zoom
 

HTML:

<div id="testcase-vendor">zoom</div>

CSS:

#testcase-vendor {
    background-color: #00FF00;
 
    -moz-zoom: 3;
    -webkit-zoom: 3;
    -o-zoom: 3;
}

Testbeispiel: Schreibweise mit
Vendor-Präfix

zoom
 

HTML:

<div id="testcase-standard">zoom</div>

CSS:

#testcase-standard {
    background-color: #0080FF;
 
    zoom: 3;
}
Beispiel nur für: Internet ExplorerSafariGoogle Chrome

Testbeispiel: Standardschreibweise

zoom
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.084 sec.

Browser-Marktanteile