CSS resize-Eigenschaft
Die CSS resize-Eigenschaft legt fest, wie ein Element skaliert werden kann. Sie steuert das Aussehen und die Funktion des Skalierungsmechanismus. Dieser Mechanismus ist normalerweise ein dreieckiger Griff in der unteren rechten Ecke des Elements.
Diese Eigenschaft ist eine der CSS3-Eigenschaften.
Sie hat 4 Werte: „none“, „both“, „horizontal“ und „vertical“. Es gibt zwei weitere Werte, „block“ und „inline“, die experimentelle Technologien sind.
INFO
Die resize-Eigenschaft gilt nicht für Inline-Elemente oder Block-Elemente, bei denen overflow auf „visible“ eingestellt ist. Sie akzeptiert nur die Werte „auto“, „scroll“ und „hidden“ der overflow-Eigenschaft.
| Anfangswert | none |
|---|---|
| Gilt für | Elemente mit overflow ungleich visible sowie optional ersetzte Elemente, die Bilder oder Videos darstellen, sowie iframes. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | Object.style.resize = "horizontal"; |
Syntax
CSS resize-Syntax
resize: none | both | horizontal | vertical | block | inline | initial | inherit;Beispiel für die resize-Eigenschaft mit dem Wert „both“:
CSS resize-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #1c87c9;
background-color: #eee;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Im obigen Beispiel sind sowohl die Höhe als auch die Breite des Elements skalierbar.
Sehen Sie sich ein weiteres Beispiel an, bei dem das Element nur vertikal skaliert werden kann:
Beispiel für die resize-Eigenschaft mit dem Wert „vertical“:
CSS resize-Beispiel für vertikale Skalierbarkeit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #ccc;
background-color: #eee;
padding: 10px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Ein weiteres Beispiel, bei dem das Element nur horizontal skaliert werden kann:
Beispiel für die resize-Eigenschaft mit dem Wert „horizontal“:
CSS resize-Beispiel für horizontale Skalierbarkeit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #8ebf42;
background-color: #eee;
padding: 10px;
width: 300px;
height: 200px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| none | Das Element wird nicht skaliert. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| both | Das Element wird sowohl vertikal als auch horizontal skaliert. | Ausführen » |
| horizontal | Das Element wird nur horizontal skaliert. | Ausführen » |
| vertical | Das Element wird nur vertikal skaliert. | Ausführen » |
| block | Das Element zeigt einen Mechanismus an, der dem Benutzer das Skalieren in Blockrichtung ermöglicht (entweder horizontal oder vertikal, abhängig vom writing-mode und direction-Wert). Dieser Wert ist eine experimentelle Technologie. | |
| inline | Das Element zeigt einen Mechanismus an, der dem Benutzer das Skalieren in Inline-Richtung ermöglicht (entweder horizontal oder vertikal, abhängig vom writing-mode und direction-Wert). Dieser Wert ist eine experimentelle Technologie. | |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Welche CSS-Eigenschaft wird verwendet, um das Skalierungsverhalten eines Elements zu steuern?