resize

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die resize CSS Eigenschaft legt fest, ob ein Element skalierbar ist, und wenn ja, in welche Richtungen.

Probieren Sie es aus

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;

Die resize Eigenschaft wird als einzelner Schlüsselwert aus der untenstehenden Liste angegeben.

Werte

none: Das Element bietet keine benutzerkontrollierte Möglichkeit zur Größenänderung an.
both: Das Element zeigt einen Mechanismus, der es dem Benutzer ermöglicht, es sowohl horizontal als auch vertikal zu skalieren.
horizontal: Das Element zeigt einen Mechanismus zur Skalierung in horizontaler Richtung an.
vertical: Das Element zeigt einen Mechanismus zur Skalierung in vertikaler Richtung an.
block: Das Element zeigt einen Mechanismus zur Skalierung in block-Richtung an (entweder horizontal oder vertikal, abhängig vom Wert der writing-mode und direction).
inline: Das Element zeigt einen Mechanismus zur Skalierung in inline-Richtung an (entweder horizontal oder vertikal, abhängig vom Wert der writing-mode und direction).

Formale Definition

Initialer Wert	`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 Skalierbarkeit von Textbereichen

In vielen Browsern sind <textarea> Elemente standardmäßig skalierbar. 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

Verwendung von resize mit beliebigen Elementen

Sie können die resize Eigenschaft verwenden, um jedes Element skalierbar zu machen. Im folgenden Beispiel enthält ein skalierbares <div> einen skalierbaren 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;
}

Ergebnis

Spezifikationen

Specification
CSS Basic User Interface Module Level 4 # resize

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

<textarea>