Gunnar Bittersmann: CSS: Bilder verschiedener Größen auf einem verticalem Strich (RESPONSIVE)

Beitrag lesen

@@Gunnar Bittersmann

Nachtrag: Die vertikale Zentrierung der Bilder erreichst du mit vertical-align: middle.

(Die Berücksichtigung des Zwischenraums zwischen den Bildern überlasse ich mal dir.)

Und da wird’s tricky, weil die Bilder (wenn im HTML-Quelltext Whitespace (Leerzeichen, Zeilenumbrüche) zwischen den <img>-Tags stehen) schon Abstand haben. Der ist ein Leerzeichen breit, bezieht sich also auf die Schriftgröße, nicht auf die Gesamtbreite.

Den Abstand mit negativem margin wegzubekommen ist auch kaum möglich; dazu müsste man genau wissen, wie breit ein Leerzeichen in der jeweiligen Schrift ist.

Bilder floaten lassen geht auch nicht, da dann sie dann vertikal nicht mehrmittig ausgerichtet sind.

Kein Whitespace im Quelltext ist nicht auch das, was man will.

Die Lösung heißt: Flexbox[^1] [^2]. (Browserunterstüzung beachten!)

LLAP

--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) [^1]: A Complete Guide to Flexbox [^2]: Using Flexbox: Mixing Old and New for the Best Browser Support