CSS-Eigenschaft resize

Die CSS-Eigenschaft resize gibt an, wie das Element in der Größe verändert werden kann.

Die Eigenschaft resize kontrolliert das Aussehen und die Funktion des Resizing-Mechanismus. Der Größenänderungsmechanismus ist in der Regel eine Dreiecktaste in der rechten unteren Ecke des Elements.

Diese Eigenschaft hat 4 Werte: "none", "both", "horizontal" und "vertical". Es gibt noch zwei weitere Werte "block" und "inline", die experimentelle Technologie sind.

Die Eigenschaft resize gilt nicht für Inline-Elemente oder für Blockelemente, bei denen die Eigenschaft overflow auf "visible" eingestellt ist. Es werden nur die Werte "auto", "scroll" und "hidden" der Eigenschaft overflow akzeptiert.

Anfangswert	none
Gilt für	Die Elemente mit einem anderen Überlauf als sichtbar, und optional ersetzte Elemente, die Bilder oder Videos und Iframes darstellen.
Geerbt	Nein
Animierbar	Nein
Version	CSS3
DOM Syntax	Object.style.resize = "horizontal";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      border: 1px solid #1c87c9;
      background-color: #eee;
      padding: 10px; 
      width: 300px;
      resize: both;
      overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft resize</h2>
    <div>
      <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
      <p>Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</p>
    </div>
  </body>
</html>

Versuch es selber!

Im vorliegenden Beispiel sind sowohl die Höhe als auch die Breite des Elements skalierbar.

Sehen Sie ein weiteres Beispiel, wo das Element nur vertikal vergrößert werden kann:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      border: 2px solid #ccc;
      background-color: #eee;
      padding: 10px; 
      width: 300px;
      resize: vertical;
      overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft resize</h2>
    <div>
      <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
      <p>Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</p>
    </div>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo das Element nur horizontal skalierbar ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      border: 1px solid #8ebf42;
      background-color: #eee;
      padding: 10px; 
      width: 300px;
      height: 200px;
      resize: horizontal;
      overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft resize</h2>
    <div>
      <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
      <p>Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</p>
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
none	Die Größe des Elements wird nicht verändert. Das ist der Standardwert dieser Eigenschaft.
both	Das Element wird sowohl vertikal als auch horizontal in der Größe verändert.
horizontal	Das Element wird nur horizontal in der Größe verändert.
vertical	Das Element wird nur vertikal verkleinert.
block	Das Element zeigt einen Mechanismus, der es dem Benutzer ermöglicht, die Größe in Blockrichtung zu ändern (entweder horizontal oder vertikal, je nach writing-mode und direction value). Dieser Wert ist eine experimentelle Technologie.
inline	Das Element verfügt über einen Mechanismus, der es dem Benutzer ermöglicht, die Größe in Inline-Richtung zu ändern (entweder horizontal oder vertikal je nach writing-mode und direction value). Dieser Wert ist eine experimentelle Technologie.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.