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 aufvisibleoderclipgesetzt ist
Syntax
/* 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-modeunddirection). 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-modeunddirection).
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
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
<textarea>Type some text here.</textarea> 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
<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
.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
Loading…