Größe ändern - CSS-Tricks

Anonim

Die resizeEigenschaft steuert, ob und wie die Größe eines Elements vom Benutzer geändert werden kann, indem Sie auf die untere rechte Ecke des Elements klicken und es ziehen.

.module ( resize: both; )

Super wichtig zu wissen: resize Tut nichts, es sei denn, die overflowEigenschaft ist auf etwas anderes als gesetzt visible, was für die meisten Elemente der Anfangswert ist.

Es ist auch wichtig zu wissen, dass Sie mit Firefox die Größe eines Elements ändern können, das kleiner als seine ursprüngliche Größe ist. Mit Webkit-Browsern können Sie die Größe eines Elements nicht ändern, um es kleiner, sondern nur größer (in beiden Dimensionen) zu machen.

Werte

  • none: Die Größe des Elements kann nicht geändert werden. Dies ist der Anfangswert für die meisten Elemente. Das textareaElement ist die häufigste Ausnahme in vielen Browsern sein resizeStandardwert ist both.
  • both: Der Benutzer kann die Höhe und / oder Breite des Elements ändern.
  • horizontal: Der Benutzer kann die Größe des Elements horizontal ändern (die Breite erhöhen).
  • vertical: Der Benutzer kann die Größe des Elements vertikal ändern (Erhöhung der Höhe).
  • inherit: Das Element erbt den Größenänderungswert seines übergeordneten Elements.

Wenn die Größe eines Elements geändert werden kann, befindet sich in einer unteren Ecke ein kleines UI-Handle. Das Handle wird rechts auf Seitenelementen angezeigt, wenn die Seite directionauf ltr(von links nach rechts) eingestellt ist, und links auf rtl(von rechts nach links) Seiten.

Ein Element ohne Griff (vorne) und mit Griff (hinten)

Demo

Das veränderbare Element in dieser Demo ist ein Absatz. Klicken Sie auf die Schaltflächen, um die verschiedenen resizeWerte auszuprobieren .

Siehe die Pen Resize Demo von CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • overflow
  • direction

Mehr Informationen

  • Die Spezifikation
  • Mozilla Docs
  • David Walshs Artikel
  • Textarea Tricks

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
4 4 * Nein 79 4

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Nein