`resize` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die resize CSS-Eigenschaft legt fest, ob ein Element veränderbar ist und, falls ja, in welchen Richtungen.

Probieren Sie es aus

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Try resizing this element.</div>
</section>

#example-element {
  background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

resize gilt nicht für die folgenden:

Inline-Elemente
Block-Elemente, für die die overflow-Eigenschaft auf visible oder clip gesetzt ist

Syntax

css

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

none: Das Element bietet keine benutzerkontrollierbare Methode zu seiner Größenänderung.
both: Das Element zeigt einen Mechanismus an, der es dem Benutzer erlaubt, es sowohl horizontal als auch vertikal zu ändern.
horizontal: Das Element zeigt einen Mechanismus an, der es dem Benutzer erlaubt, es in der horizontalen Richtung zu ändern.
vertical: Das Element zeigt einen Mechanismus an, der es dem Benutzer erlaubt, es in der vertikalen Richtung zu ändern.
block: Das Element zeigt einen Mechanismus an, der es dem Benutzer erlaubt, es in der Block-Richtung (entweder horizontal oder vertikal, abhängig vom writing-mode und dem direction-Wert) zu ändern.
inline: Das Element zeigt einen Mechanismus an, der es dem Benutzer erlaubt, es in der Inline-Richtung (entweder horizontal oder vertikal, abhängig vom writing-mode und dem direction-Wert) zu ändern.

Formale Definition

Anfangswert	`none`
Anwendbar auf	Elemente, deren `overflow` nicht `visible` ist, und optional ersetzte Elemente, die Bilder oder Videos repräsentieren, und iframes
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline

Beispiele

Deaktivieren der Änderbarkeit von Textbereichen

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

HTML

html

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

CSS

css

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

Ergebnis

Verwenden von `resize` mit beliebigen Elementen

Sie können die resize-Eigenschaft verwenden, um jedes Element veränderbar zu machen. Im unten stehenden Beispiel enthält ein veränderbares <div> einen veränderbaren Absatz (<p>-Element).

HTML

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

css

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

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

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