CSS -Resize- Eigenschaft
Beispiel
Hier kann der Benutzer sowohl die Höhe als auch die Breite eines <div>-Elements ändern:
div {
resize: both;
overflow: auto;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die resize
Eigenschaft definiert, ob (und wie) die Größe eines Elements vom Benutzer geändert werden kann.
Hinweis: Die resize
Eigenschaft gilt nicht für Inline-Elemente oder Blockelemente, bei denen overflow="visible" ist. Stellen Sie also sicher, dass der Überlauf auf „Scroll“, „Auto“ oder „hidden“ eingestellt ist.
Standardwert: | keiner |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.resize="beide" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -moz- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
CSS-Syntax
resize: none|both|horizontal|vertical|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Lassen Sie den Benutzer nur die Höhe eines <div>-Elements skalieren:
div
{
resize: vertical;
overflow: auto;
}
Beispiel
Lassen Sie den Benutzer nur die Breite eines <div>-Elements ändern:
div
{
resize: horizontal;
overflow: auto;
}
Beispiel
In vielen Browsern ist <textarea> standardmäßig in der Größe veränderbar. Hier haben wir die Eigenschaft resize verwendet, um die Größenänderung zu deaktivieren:
textarea {
resize: none;
}
Verwandte Seiten
CSS-Tutorial: CSS-Benutzeroberfläche
HTML-DOM-Referenz: Größenänderungseigenschaft