CSS
HTML
COMPONENTS
CODE HUB
CSS Box Resize Generator
Konfiguration
Randtyp
Klasse
Vorschau
Resize!
Code
ReadyTools Academy
Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯
Jetzt startenCSS Box Resize Generator
Die resize-Eigenschaft in CSS wird verwendet, um zu steuern, ob ein HTML-Element vom Benutzer skalierbar ist oder nicht. Sie wird hauptsächlich für Elemente wie Textbereiche und iframes verwendet, die Inhalte enthalten, die möglicherweise vom Benutzer skaliert werden müssen.
Die resize-Eigenschaft kann die folgenden Werte haben:
.resizable-element {
resize: none;
}
both: Das Element kann sowohl horizontal als auch vertikal vom Benutzer skaliert werden.
.resizable-element {
resize: both;
}
horizontal: Das Element kann nur horizontal vom Benutzer skaliert werden.
.resizable-element {
resize: horizontal;
}
vertical: Das Element kann nur vertikal vom Benutzer skaliert werden.
.resizable-element {
resize: vertical;
}
Hier ist ein Beispiel, wie Sie die resize-Eigenschaft verwenden können, um ein Textbereich-Element vom Benutzer skalierbar zu machen:
.resizable-textarea {
resize: both;
}
In diesem Beispiel ermöglicht die Klasse .resizable-textarea Benutzern, das Textbereich-Element sowohl horizontal als auch vertikal zu skalieren.
Die resize-Eigenschaft ist besonders nützlich, um die Benutzererfahrung mit Elementen wie Textbereichen zu verbessern, bei denen Benutzer die Größe des Eingabebereichs basierend auf ihren Inhalten oder Vorlieben anpassen möchten.