resize - CSS

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