Größe ändern | CSS-Tricks

Die resize-Eigenschaft steuert, ob und wie ein Element vom Benutzer durch Klicken und Ziehen der unteren rechten Ecke des Elements vergrößert oder verkleinert werden kann.

.module {
  resize: both;
}

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

Es ist auch erwähnenswert, dass Firefox es Ihnen erlaubt, ein Element kleiner als seine ursprüngliche Größe zu machen. Webkit-Browser erlauben es Ihnen nicht, ein Element kleiner zu machen, nur größer (in beiden Dimensionen).

Werte

none: Das Element kann nicht vergrößert oder verkleinert werden. Dies ist der Anfangswert für die meisten Elemente. Das textarea-Element ist die häufigste Ausnahme – in vielen Browsern ist sein Standardwert für resize both.
both: Der Benutzer kann die Höhe und/oder Breite des Elements ändern.
horizontal: Der Benutzer kann das Element horizontal ändern (Breite erhöhen).
vertical: Der Benutzer kann das Element vertikal ändern (Höhe erhöhen).
inherit: Das Element erbt den resize-Wert seines Elternelements.

Wenn ein Element vergrößert oder verkleinert werden kann, hat es unten rechts eine kleine Benutzeroberflächenleiste. Die Leiste erscheint rechts bei Seitenelementen, wenn die direction der Seite auf ltr (Links-nach-Rechts) gesetzt ist, und links bei rtl (Rechts-nach-Links) Seiten.

noresizer — Ein Element ohne die Leiste (vorne) und mit der Leiste (hinten)

Demo

Das vergrößerbare/verkleinerbare Element in dieser Demo ist ein Absatz. Klicken Sie auf die Schaltflächen, um die verschiedenen resize-Werte auszuprobieren.

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

Verwandt

Weitere Informationen

Browser-Unterstützung

Diese Browser-Supportdaten stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.

Desktop

Chrome	Firefox	IE	Edge	Safari
4	4*	Nein	79	4

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	Nein

Kommentare

Fernando

# 20. Februar 2013

Hey, Mann. Ich bin sehr dankbar für all die Tricks, die du geteilt hast.

Muchas gracias!

Antworten

harpreet bhatia

# 20. Januar 2014

Kann dies auch einem onresize-Ereignis unterliegen?

Antworten

Mike C

Permalink zum Kommentar# 25. August 2017

Ich weiß, dass das etwas spät ist, aber das window ist der einzige Teil des DOM, der das onresize-Ereignis auslöst.

Josh Harrington

# 1. Oktober 2014

Hallo Chris,

Du bist immer meine erste Anlaufstelle für alles rund um CSS, danke für all die Hilfe über die Jahre!

Ich wollte nur Ihren Punkt über die Seltsamkeit zwischen Chrome und Firefox erweitern. Ich ging davon aus, dass Sie einer vergrößerbaren/verkleinerbaren Komponente min-width, width und max-width zuweisen könnten, wobei die geladene Breite von der Standardbreite übernommen wird. Dies scheint in Firefox der Fall zu sein, aber nicht in Chrome.

Haben Sie Ideen, ob sich dies ändern wird, um das Firefox-Verhalten auch in Chrome zu implementieren?

Vielen Dank,
Josh

Antworten

channu yatnur

# 29. Januar 2015

Hallo,
css resize:both für iframes funktioniert nicht in IE und Firefox, aber in Chrome sehr gut... bitte geben Sie mir Vorschläge.

Antworten

Adam Taylor

# 30. Juli 2015

Es könnte sich lohnen, hinzuzufügen, dass max-width und max-height verwendet werden können, um die Größe, auf die das Element geändert werden kann, zu begrenzen. So wird verhindert, dass es zu groß wird und aus seinem übergeordneten Element ausbricht.

Antworten

Laurens Maneschijn

# 19. Juli 2017

Späte Antwort, aber vielleicht hilft es ja noch jemandem.

Ich fand die Webkit-Beschränkung, dass man ein Element nicht verkleinern kann, ziemlich frustrierend und fand heraus, dass :active{ width:0; height: 0; } hilft.

Empfohlen

fügen Sie width, height für eine sinnvolle Startgröße hinzu.
fügen Sie min-width, min-height für eine sinnvolle Mindestgröße hinzu, damit Sie nicht mit einer 0x0-Box enden, die schwer wieder zu vergrößern ist.
fügen Sie max-width, max-height für eine sinnvolle Maximalgröße hinzu, damit Sie die Ecke nicht außerhalb Ihres Fensters ziehen.

Notizen

Ich bin mir nicht ganz sicher, wie das funktioniert.
Es scheint ein bisschen ein Hack zu sein und wahrscheinlich ist es ratsam, sich nicht auf solche Lösungen in Produktionswebsites zu verlassen.
Es scheint auf Browsern zu funktionieren, die die Mindestgröße auf die Anfangsgröße beschränken (WebKit z.B. Chrome).
Es hat Nebenwirkungen: Wenn Sie auf das Element klicken, kann es (temporär) auf Null schrumpfen.
Das Obige ist auf Mobilgeräten und Browsern, die resize nicht unterstützen, deutlicher zu erkennen.
und kann in diesem Zustand bleiben, bis Sie außerhalb des Elements klicken oder tippen.
Es ist wahrscheinlich ratsam, Mechanismen zu verwenden, um dies auf Webkit-Browser zu beschränken.

Testen Sie hier: https://jsfiddle.net/ElMoonLite/771Ln5vu/

Vollständiges Beispiel

.resize {
  resize: both;
  overflow: hidden;
/* optional:
  width:  <some sensible starting size>;
  height: <some sensible starting size>;
  min-width:  <some sensible min size>;
  min-height: <some sensible min size>;
  max-width:  <some sensible max size>;
  max-height: <some sensible max size>;
*/
}
.resize:active {
  width: 0;
  height: 0;
}

Antworten

Liam Mitchell

# 27. Oktober 2017

Könnte resize die Angabe einer Ecke oder Kante ermöglichen, auf die es angewendet werden soll?
Ebenso die Gestaltung des Icons/Bereichs.

Beispiel: Ein absolut gesetzter Bereich unten links möchte seine vertikale Größe von der oberen Kante aus ändern.

Antworten

Zach Bjornson

# 15. Februar 2019

Update/Korrektur: Chrome 61+ (nicht mehr WebKit-Browser) erlaubt das Verkleinern. https://bugs.chromium.org/p/chromium/issues/detail?id=94583

Antworten

Zoink

# 3. Juni 2020

Gibt es eine Möglichkeit, das resize beim Ziehen der Kanten des Elements anzupassen?

Antworten

Amrit kaur

# 8. September 2021

resize-Eigenschaft sehr gut definiert!

Antworten

Werte

Demo

Verwandt

Weitere Informationen

Browser-Unterstützung

Desktop

Mobil / Tablet

Kommentare

Antwort hinterlassen Antwort abbrechen