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

[Gunnar Bittersmann]

@@Eier-mit-Kresse

Das Bild soll in der Desktopansicht so aussehen und im Mobildesign auch (nur die Bilder werden kleiner Skalliert).

Du willst also die Breiten der Bilder in Prozent (der Gesamtbreite) angeben.

Die Bildgrößen verhalten sich wie 100 : 132 : 184 : 250 : 184 : 132 : 100.

Macht in der Summe 100 + 132 + 184 + 250 + 184 + 132 + 100 = 1082.

Wenn du nun die Bildbreiten durch 1082 teilst und mit 100% erweiterst, hast du die prozentualen Breiten der einzelnen Bilder. Wenn du keine Höhen angibst, werden die Bilder so skaliert (mit einem l), dass ihr Seitenverhältnis erhalten bleibt.

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

Allerdings ist mir nicht klar, warum die Bilder auf einem Smartphone auch so angeordnet werden sollen. In Hochkantmodus ist dann so gut wie nichts mehr zu erkennen.

LLAP