CSS
HTML
COMPONENTS
CODE HUB
CSS Box Resize Generator
Konfiguration
Randtyp
Klasse
Vorschau
Resize!
Code
Coden lernen mit Lara
Meistere Programmierkonzepte Schritt für Schritt mit deinem interaktiven KI-Tutor. Lara erklärt komplexe Logik, überprüft deine Praxisübungen und hilft dir, ein solides Fundament in der Softwareentwicklung aufzubauen.
Interaktive Programmierlektionen, angepasst an dein eigenes Tempo.
Jetzt lernen mit Lara 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.