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, falls 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 folgende:

  • 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üsselwortwert aus der unten stehenden Liste angegeben.

Werte

none

Das Element bietet keine vom Benutzer steuerbare Möglichkeit zur Größenänderung.

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, der es dem Benutzer ermöglicht, es in horizontaler Richtung zu skalieren.

vertical

Das Element zeigt einen Mechanismus, der es dem Benutzer ermöglicht, es in vertikaler Richtung zu skalieren.

block

Das Element zeigt einen Mechanismus, der es dem Benutzer ermöglicht, es in der Block-Richtung zu skalieren (entweder horizontal oder vertikal, abhängig von den Werten für writing-mode und direction).

inline

Das Element zeigt einen Mechanismus, der es dem Benutzer ermöglicht, es in der Inline-Richtung zu skalieren (entweder horizontal oder vertikal, abhängig von den Werten für writing-mode und direction).

Formale Definition

Anfangswertnone
Anwendbar aufElemente, deren overflow nicht visible ist, und optional ersetzte Elemente, die Bilder oder Videos repräsentieren, und iframes
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale 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

Verwenden 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>-Element 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

Siehe auch