resize

Diese Übersetzung ist in Arbeit.

Die CSS Eigenschaft resize CSS legt fest, ob ein Element größenveränderbar ist, und wenn ja, in welche Richtungen.

resize gilt nicht für die folgenden Elemente:

  • Inline Elemente
  • Blockelemente, für die die Eigenschaft overflow auf visible gesetzt ist

Syntax

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

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

Die Eigenschaft resize wird als ein einzelner Schlüsselwortwert aus der folgenden Liste angegeben.

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 Definition

Initialwertnone
Anwendbar aufElemente, deren overflow nicht visible ist, und optional ersetzte Elemente, die Bilder oder Videos repräsentieren, und iframes
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

none | both | horizontal | vertical | block | inline

Beispiele

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

In vielen Browsern sind <textarea> Elemente standardmäßig in der Größe veränderbar. Sie können dieses Verhalten mit der resize Eigenschaft überschreiben.

HTML

<textarea>Type some text here.</textarea>

CSS

textarea {
  resize: none; /* Disables resizability */
}  

Ergebnis

Verwendung von resize bei beliebigen Elementen

Sie können die Eigenschaft resize verwenden, um die Größe eines beliebigen Elements zu ändern. Im folgenden Beispiel enthält ein größenveränderbares <div> einen größenveränderbaren Absatz (<p> Element).

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because
    the CSS `resize` property is set to `both` on this element.
  </p>
</div>

CSS

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

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

p {
  height: 200px;
  width: 200px;
}  
<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because
    the CSS `resize` property is set to `both` on this element.
  </p>
</div>
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

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

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

Ergebnis

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 AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
resizeChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 4IE Keine Unterstützung NeinOpera Vollständige Unterstützung 12.1Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
Support on block level, replaced, table cell, or inline block elementsChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 79Firefox 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 Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 5
Hinweise
Vollständige Unterstützung 5
Hinweise
Hinweise resize doesn't have any effect on <iframe>. See bug 680823)
Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 3.2Samsung Internet Android Vollständige Unterstützung 1.0
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 NeinFirefox Android Vollständige Unterstützung 63Opera 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
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch