CSS resize – Größe von Elementen ändern

resize für User: div, iframe, p, …

HTML textarea bietet Nutzern seit langem an, den Eingabebereich mit der zart gekennzeichneten Ecke unten rechts größer oder breiter aufzuziehen – in textearea ist resize: both die Voreinstellung, die nicht explizit notiert werden muss. Aber alle anderen Block-Elemente beherrschen resize ebenfalls, wenn die overflow-Eigenschaft scroll, auto oder hidden ist.

div {
	resize: both;
	overflow: auto;
}

Zieh mal unten rechts

Auch bei iframe funktioniert resize in alle Richtungen.

iframe {
	resize: both;
	max-width: 800px;
	max-height: 400px;
}

Ohne Begrenzung auf min-width / max-width dehnt sich ein Block mit resize über alle Maße aus, aber beeinträchtigt das Layout nicht. Bei Vergrößerungen in der Vertikalen verdrängt das Element den folgenden Inhalt nach unten.

Fast immer ist es besser, den Benutzer auf diese Option hinzuweisen, denn die kleine Markierung – drei zarte Diagonalen in der Ecke unten links – fällt kaum ins Auge. Hier hebt der untere Bereich des Elements mit zwei zusätzlichen CSS-Eigenschaften die resize-Markierung hervor.

background: linear-gradient(135deg, beige 0,beige 94%,white 95%);
padding-bottom: 3%;

resize horizontal, resize vertical

horizontal und vertical begrenzen die Größenveränderung auf die x- bzw. y-Achse.


.resize {

   resize: horizontal;

}

Verhalten im skalierten Element

Wenn der Benutzer ein Element mit resize verkleinert oder vergrößert, verhalten sich Texte und Bilder innerhalb des Elements sozusagen responsiv und können sich der neuen Breite des Elements anpassen.

Es war einmal eine kluge junge Ente, die hervorragend sehen konnte und obendrein eine angesehene Mathematikerin war. Durch das lange Studieren bei schlechtem Licht wurden ihre Augen mit den Jahren zusehens schlechter, und eines Tages konnte sie kaum noch ihre eigenen Randnotizen erkennen, nicht einmal ihre Lieblingsformel e = N*t^e.

Formeln mit MathML konnte sie nur noch erkennen, wenn sie nicht innerhalb von Zeilen standen, sondern zentral mit viel Padding drum herum. $\sum_{k = n}^{m} a (k)$

Weil Chrome MathML nicht verstand, konnte sie Publikationen nur noch mit Firefox studieren. Darum bat sie eines Tages ihren Assistenten, ihr einen guten Augenarzt zu suchen.

width: 200px

resize für iframe

Um noch einmal auf den zarten Hinweis unten rechts zu kommen: Hat der eingebundene Inhalt – sei es nun ein iframe oder ein einfaches Block-Element – einen farbigen Hintergrund, ist die Markierung gar nicht mehr zu erkennen. Zwar ändert sich der Cursor automatisch in einen Resize-Cursor, wenn der Benutzer über den Griff der Box hovert, aber auch dieser visuelle Hinweis wird schnell übersehen.

Auch die Möglichkeit, durch den Inhalt des Elements zu scrollen, muss hervorgehoben werden.

CSS resize auf Touch-Devices

Wird von Android unterstützt, nicht aber von iOS.

Browser ohne Unterstützung von resize für Elemente durch @supports-Regel ausklammern.

@supports ( resize: both ) {
	.simpleiframe, .leo {
		resize:both; 
	}
}