resize

Übersicht

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

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.

Formale Syntax

none | both | horizontal | vertical

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

Browser Kompatibilität

Siehe auch

• <textarea>