resize

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 This is an experimental API that should not be used in production code.
Abhängig von den Werten für writing-mode (en-US) 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 This is an experimental API that should not be used in production code.
Abhängig von den Werten für writing-mode (en-US) 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> (en-US) 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 */
}  
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

BCD tables only load in the browser

Siehe auch