resize

Limited availability

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

Die resize-Eigenschaft von CSS legt fest, ob ein Element skalierbar ist und wenn ja, in welche 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;

Die resize-Eigenschaft wird als ein einzelner Schlüsselwortwert aus der folgenden Liste angegeben.

Werte

none: Das Element bietet keine benutzerkontrollierbare Methode zum Skalieren.
both: Das Element zeigt ein Mechanismus an, der es dem Benutzer erlaubt, es sowohl horizontal als auch vertikal zu skalieren.
horizontal: Das Element zeigt ein Mechanismus an, der es dem Benutzer erlaubt, es in der horizontalen Richtung zu skalieren.
vertical: Das Element zeigt ein Mechanismus an, der es dem Benutzer erlaubt, es in der vertikalen Richtung zu skalieren.
block: Das Element zeigt ein Mechanismus an, das es dem Benutzer erlaubt, es in der Block-Richtung zu skalieren (entweder horizontal oder vertikal, abhängig von dem writing-mode und direction Wert).
inline: Das Element zeigt ein Mechanismus an, das es dem Benutzer erlaubt, es in der Inline-Richtung zu skalieren (entweder horizontal oder vertikal, abhängig von dem writing-mode und direction Wert).

Formal 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

Formal syntax

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

Beispiele

Deaktivierung 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 untenstehenden Beispiel enthält ein skalierbares <div> ein skalierbares Absatz-Element (<p>).

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

Siehe auch

<textarea>

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden