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>

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>

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>

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.

Browser-Support

4.0+ 5.0+
4.0 -moz-
4.0+ 15.0+


Finden Sie das nützlich?

Ähnliche Artikel