Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

resize

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Übersicht

Die resize CSS Eigenschaft erlaubt es, die Möglichkeit zur Größenänderung eines Elements zu steuern.

Initialwertnone
Anwendbar aufElemente, deren overflow nicht visible ist, und optional ersetzte Elemente, die Bilder oder Videos repräsentieren, und iframes
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimierbarNein
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Globale Werte */
resize: inherit;
resize: initial;
resize: unset;

Werte

none
Das Element bietet keine vom Benutzer steuerbare Möglichkeit zur Größenänderung des Elements.
both
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, sowohl die horizontale als auch die vertikale Größe des Elements zu ändern.
horizontal
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale Größe des Elements zu ändern.
vertical
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die vertikale Größe des Elements zu ändern.
block
Abhängig von den Werten für writing-mode und direction, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Blockrichtung zu ändern.
inline
Abhängig von den Werten für writing-mode und direction, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Inlinerichtung zu ändern.
Hinweis: resize wird nicht auf Blöcke angewendet, für die die overflow Eigenschaft auf visible gesetzt ist.

Formale Syntax

none | both | horizontal | vertical

Beispiele

Deaktivierung der Größenänderungsmöglichkeit von Textareas

CSS

Standardmäßig können <textarea> Elemente in Gecko 2.0 (Firefox 4) in der Größe geändert werden. Dies kann durch das unten gezeigte CSS überschrieben werden:

textarea.example {
  resize: none; /* deaktiviert die Möglichkeit zur Größenänderung */
}

HTML

<textarea class="example">Type some text here.</textarea>

Result

Verwendung der Größenänderungsmöglichkeit bei beliebigen Elementen

Die resize Eigenschaft kann dazu verwendet werden, Elemente in der Größe veränderbar zu machen. Im Beispiel unten enthält ein größenveränderbares <div> Element einen größenveränderbaren Absatz (<p> Element):

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    Dieser Absatz ist größenveränderbar, weil die CSS <code>resize</code>
    Eigenschaft für das Element auf <code>both</code> gesetzt ist.
  </p>
</div>

Result

Spezifikationen

 

Spezifikation Status Kommentar
CSS Logical Properties Level 1
Die Definition von 'resize' in dieser Spezifikation.
Bearbeiterentwurf Fügt die Werte block und inline hinzu.
CSS Basic User Interface Module Level 3
Die Definition von 'resize' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung (für <textarea>) 1.0 4.0 (2.0)-moz Nicht unterstützt Nicht unterstützt 3.0 (522)
Bei beliebigen Blocklevel- und ersetzten Elementen, Tabellenzellen und Inlineblockelementen (außer, wenn overflow visible ist) 4.0 5.0 (5.0) Nicht unterstützt Nicht unterstützt 4.0
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung (für <textarea>) ? ? ? ? ?
Bei beliebigen Blocklevel- und ersetzten Elementen, Tabellenzellen und Inlineblockelementen (außer, wenn overflow visible ist) ? ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: SphinxKnight, Sebastianz, fscholz, SJW
 Zuletzt aktualisiert von: SphinxKnight,