CSS/Tutorials/Benutzeroberfläche/resize

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

Mit der Eigenschaft resize können Sie bestimmen, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann. Was für textarea-Elemente in vielen Browsern seit einiger Zeit üblich ist, lässt sich für alle Elemente nachbilden.

Browserunterstützung
caniuse.com

Folgende Angaben sind möglich:

• 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

Der Default-Wert ist none. In aktuellen Browsern kann für manche Elemente eine andere Voreinstellung festgelegt sein.

Größenanpassung eines div ansehen …

div {
	background: royalblue;
	border: thin solid darkblue;
	color: white;
	float: left; 
	margin: 0 1em 1em;
	padding: 1em;
	overflow: auto; /* muss gesetzt werden! */
	resize: both;
	width: 10em;
      }
div code {
        display: block;
      }

HTML-Markup

  
    <div>
      <code>resize: both;</code>
      <code>overflow: auto;</code>
      <p>Die resize-Eigenschaft legt fest, ob ein Element
        durch den Nutzer in seiner Größe verändert werden
        kann.
      </p>
    </div>
>

Das div kann in seiner Größe verändert werden. Der umfließende Text nimmt den weiteren, verfügbaren Raum ein und wandert bei einer Vergößerung nach unten.

Beachten Sie: Ein 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.

Beachten Sie: Chrome und Safari lassen keine Verkleinerung des Elementes zu.

Sie können durch die Verwendung von resize: none; die Größenänderung von textarea-Elementen verhindern.