CSS resize-Eigenschaft

Die CSS-Eigenschaft resize steuert, ob — und in welche Richtung — der Benutzer ein Element durch Ziehen in seiner Größe ändern kann. Wenn die Größenänderung aktiviert ist, zeigt der Browser einen kleinen Ziehpunkt (üblicherweise ein dreieckiges Symbol) in der unteren rechten Ecke des Elements an, mit dem Besucher das Feld selbst vergrößern oder verkleinern können.

Diese Eigenschaft gehört zu den CSS3-Eigenschaften. Am bekanntesten ist sie beim <textarea>-Element, das in den meisten Browsern standardmäßig in der Größe änderbar ist. Mit resize können Sie dieses Verhalten auf andere Boxen ausdehnen — oder es bei einem <textarea> deaktivieren, wenn eine freie Größenänderung das Layout zerstören würde.

Die vier Standardwerte sind none, both, horizontal und vertical. Zwei weitere Werte, block und inline, ändern die Größe relativ zur Schreibrichtung und gelten noch als experimentell.

Info

resize hat nur dann eine Wirkung, wenn das Element seinen eigenen Inhalt tatsächlich abschneiden kann. Es wird bei Inline-Elementen und bei Elementen ignoriert, deren overflow auf visible (dem Standardwert) steht. Damit resize bei einem generischen Block wie einem <div> funktioniert, muss overflow auf auto, scroll oder hidden gesetzt werden. Bei einem <textarea> ist dies nicht erforderlich, da es bereits einen eigenen Scroll-Container einrichtet.

Anfangswert	none
Gilt für	Elemente mit einem anderen overflow-Wert als visible sowie optional ersetzte Elemente, die Bilder oder Videos repräsentieren, und iframes.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	Object.style.resize = "horizontal";

Syntax

resize: none | both | horizontal | vertical | block | inline | initial | inherit;

Kombinieren Sie resize mit overflow und einer sinnvollen Ausgangs-width/height, damit die Box eine definierte Größe hat, von der aus sie verändert werden kann. Sie sollten auch min-width/max-width (oder ihre Höhen-Gegenstücke) in Betracht ziehen, um die Box innerhalb vernünftiger Grenzen zu halten.

Beispiel der resize-Eigenschaft mit dem Wert "both"

<!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>

Probier es selbst »

Hier sind sowohl die Höhe als auch die Breite des <div> ziehbar, weil resize: both mit overflow: auto kombiniert wird. Entfernen Sie die overflow-Zeile, verschwindet der Ziehpunkt — das ist der häufigste Grund, warum resize „nicht funktioniert".

Ein weiteres Beispiel, bei dem die Größe des Elements nur vertikal geändert werden kann:

Beispiel der resize-Eigenschaft mit dem Wert "vertical"

CSS resize — vertikal änderbares Beispiel

<!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>

Probier es selbst »

Ein weiteres Beispiel, bei dem die Größe des Elements nur horizontal geändert werden kann:

Beispiel der resize-Eigenschaft mit dem Wert "horizontal"

CSS resize — horizontal änderbares Beispiel

<!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>

Probier es selbst »

Größenänderung bei einem textarea deaktivieren

Eine sehr häufige Anwendung in der Praxis ist das Gegenteil der obigen Beispiele: das Deaktivieren des Standard-Ziehpunkts bei einem <textarea>, damit Benutzer ein Formular mit fester Breite nicht zerstören können. Setzen Sie resize: none (oder resize: vertical, wenn Sie nur die Höhenzunahme erlauben möchten):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 300px;
        height: 100px;
        /* allow the box to grow taller, but never wider */
        resize: vertical;
      }
    </style>
  </head>
  <body>
    <h2>Comment</h2>
    <textarea placeholder="Type your message..."></textarea>
  </body>
</html>

Wann verwenden

Textareas: der alltägliche Anwendungsfall. Verwenden Sie resize: vertical, damit Benutzer ein Kommentarfeld in die Länge ziehen können, ohne die Breite des Formulars zu verzerren, oder resize: none, um es vollständig zu sperren.
Größenänderbare Panels und Vorschauen: Code-Editoren, Bildvergleiche und Chat-Fenster ermöglichen es Benutzern, eine Box auf eine angenehme Größe zu ziehen.
Vermeiden bei layout-kritischen Boxen: Wenn das Ziehen eines Elements andere Inhalte unvorhersehbar überlappen oder verschieben würde, belassen Sie resize bei none.

Da die Größenänderung nur die dargestellte Größe im Browser verändert und niemals den eigentlichen Inhalt, hat sie keinen Einfluss auf das Dokument, das gesendet oder gespeichert wird.

Werte

Wert	Beschreibung	Ausprobieren
none	Das Element wird nicht in der Größe geändert. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
both	Die Größe des Elements wird sowohl vertikal als auch horizontal geändert.	Ausprobieren »
horizontal	Die Größe des Elements wird nur horizontal geändert.	Ausprobieren »
vertical	Die Größe des Elements wird nur vertikal geändert.	Ausprobieren »
block	Das Element zeigt einen Mechanismus an, der es dem Benutzer ermöglicht, es in der Block-Richtung in der Größe zu ändern (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 es dem Benutzer ermöglicht, es in der Inline-Richtung in der Größe zu ändern (entweder horizontal oder vertikal, abhängig vom writing-mode- und direction-Wert). Dieser Wert ist eine experimentelle Technologie.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche CSS-Eigenschaft wird verwendet, um das Größenänderungsverhalten eines Elements zu steuern?

resizescaletransformchange