CSS/Eigenschaften/resize

Der Begriff resize ist mehrdeutig.
Für das gleichnamige JavaScript-Event siehe JavaScript/DOM/Event/resize.

Die Eigenschaft resize bestimmt, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann.

Erlaubte Werte

• none, keine Größenveränderung
• both, Höhe und Breite sind veränderbar
• horizontal, Breite ist veränderbar
• vertical, Höhe ist veränderbar
• initial, setzt es auf den Ausgangswert zurück.
• inherit, Einstellung des Elternelements wird übernommen

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

Block-Elemente, Flex-Container und Grid-Container

Vererbung

nein

animierbar

nein

Beispiel

div {
  overflow: auto;
  padding: 1em;
  resize: both;
  width: 10em;
}

Das div darf in beide Richtungen vergrößert werden.

Beachten Sie: Eine Veränderung der Größe ist nur möglich und sinnvoll, wenn die overflow-Eigenschaft des Elements einen Wert hat, der verschieden von visible ist.
Chrome und Safari lassen keine Verkleinerung des Elementes zu.

Siehe auch

• CSS/Tutorials/Benutzeroberfläche
  • Größenänderungen mit resize

Weblinks

• Spezifikation (W3C): resize property
• MDN: resize