Um Bilder in HTML zu positionieren und diese in eine andersartige Form umzuwandeln gibt es viele verschiedene Möglichkeiten, auf die ich in meiner Webseite nun gerne eingehen möchte.
1. Float
float: left / right
Float lässt das Bild links schweben, Text fließt rechts herum. Klassische Methode für Zeitungen und Blogs.
Mit float: right schwebt das Bild rechts, Text links. Wichtig: clearfix verhindert Layout-Probleme.
2. Grid
display: grid; grid-template-columns: 300px 1fr;
Grid definiert vorher die Struktur. Erste Spalte 300px, zweite nimmt Rest.
Text bleibt in seiner Spalte, sehr kontrolliert und modern.
3. Flexbox
display: flex; flex-shrink: 0;
Flexbox ordnet Elemente flexibel in einer Reihe an.
Bild bestimmt selbst seine Größe, flex-shrink: 0 verhindert Verkleinerung.
4. Position Absolute
position: absolute; top/right/bottom/left
Oben Rechts
Unten Links
Absolute positionierte Elemente schweben frei. Container braucht position: relative.
Perfekt für Overlays, Badges oder Wasserzeichen.
5. Shape-outside
shape-outside: circle(50%); clip-path: circle(50%);
Shape-outside lässt Text um Formen fließen - nicht nur Rechtecke! Hier ein Kreis.
Clip-path schneidet das Bild rund zu. Funktioniert auch mit Polygonen. Sehr kreativ für Magazine-Looks.
6. Object-fit
object-fit: cover / contain / fill
Bestimmt, wie Bilder in feste Container passen:
COVER
Füllt Container, schneidet ab
CONTAIN
Ganzes Bild sichtbar
FILL
Streckt/staucht