Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Übersicht

Die resize CSS Eigenschaft erlaubt es, die Möglichkeit zur Größenänderung eines Elements zu steuern.

Initialwertnone
Anwendbar aufElemente, deren overflow nicht visible ist, und optional ersetzte Elemente, die Bilder oder Videos repräsentieren, und iframes
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Globale Werte */
resize: inherit;
resize: initial;
resize: unset;

Werte

none
Das Element bietet keine vom Benutzer steuerbare Möglichkeit zur Größenänderung des Elements.
both
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, sowohl die horizontale als auch die vertikale Größe des Elements zu ändern.
horizontal
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale Größe des Elements zu ändern.
vertical
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die vertikale Größe des Elements zu ändern.
block
Abhängig von den Werten für writing-mode und direction, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Blockrichtung zu ändern.
inline
Abhängig von den Werten für writing-mode und direction, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Inlinerichtung zu ändern.
Hinweis: resize wird nicht auf Blöcke angewendet, für die die overflow Eigenschaft auf visible gesetzt ist.

Formale Syntax

none | both | horizontal | vertical | block | inline

Beispiele

Deaktivierung der Größenänderungsmöglichkeit von Textareas

CSS

Standardmäßig können <textarea> Elemente in Gecko 2.0 (Firefox 4) in der Größe geändert werden. Dies kann durch das unten gezeigte CSS überschrieben werden:

textarea.example {
  resize: none; /* deaktiviert die Möglichkeit zur Größenänderung */
}

HTML

<textarea class="example">Type some text here.</textarea>

Result

Verwendung der Größenänderungsmöglichkeit bei beliebigen Elementen

Die resize Eigenschaft kann dazu verwendet werden, Elemente in der Größe veränderbar zu machen. Im Beispiel unten enthält ein größenveränderbares <div> Element einen größenveränderbaren Absatz (<p> Element):

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    Dieser Absatz ist größenveränderbar, weil die CSS <code>resize</code>
    Eigenschaft für das Element auf <code>both</code> gesetzt ist.
  </p>
</div>

Result

Spezifikationen

 

Spezifikation Status Kommentar
CSS Logical Properties and Values Level 1
Die Definition von 'resize' in dieser Spezifikation.
Bearbeiterentwurf Fügt die Werte block und inline hinzu.
CSS Basic User Interface Module Level 3
Die Definition von 'resize' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Keine Unterstützung 4 — ?
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 12.1Safari Vollständige Unterstützung 3WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Support on block level, replaced, table cell, or inline block elementsChrome Vollständige Unterstützung 4Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 5
Hinweise
Vollständige Unterstützung 5
Hinweise
Hinweise resize doesn't have any effect on <iframe>. See bug 680823)
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 4WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Support for flow-relative values block and inlineChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, SphinxKnight, Sebastianz, fscholz
Zuletzt aktualisiert von: SJW,