nicht angemeldet
CSS: Bilder verschiedener Größen auf einem verticalem Strich (RESPONSIVE)
0 
robertroth
0 Tabellenkalk
CSS: Bilder verschiedener Größen auf einem verticalem Strich (RESPONSIVE)
Gunnar BittersmannHallo,
ich habe ein einem Gritt 12 mit 7 Grafiken. Alle Bilder haben verschiedene größen uns sollen auf einer mittigen Linie aufgelistet werden.
So soll es aussehen
Das Problem ist natürlich, das der Eintrag auch in einem Bootstrap Responsive Layout funktionieren muss. Daher helfen
Jetzt kommt Ihr als Profis.
-
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
ich habe ein einem Gritt 12 mit 7 Grafiken. Alle Bilder haben verschiedene größen uns sollen auf einer mittigen Linie aufgelistet werden. So soll es aussehen
Das Problem ist natürlich, das der Eintrag auch in einem Bootstrap Responsive Layout funktionieren muss. Daher helfen
Jetzt kommt Ihr als Profis.
Ich versteh nicht ganz. Sollen sich die Anordnung und das Aussehen der Elemente nun selbstständig berappeln, oder sollen sie immer so ähnlich aussehen, wie in deinem Bild?
Spirituelle Grüße
Euer Robert
robert.r@online.de--
Möge der wahre Forumsgeist ewig leben!-
Hallo Robert,
So soll es aussehen
Ich versteh nicht ganz. Sollen sich die Anordnung und das Aussehen der Elemente nun selbstständig berappeln, oder sollen sie immer so ähnlich aussehen, wie in deinem Bild?
irgendwie alles parallel. Das Bild soll in der Desktopansicht so aussehen und im Mobildesign auch (nur die Bilder werden kleiner Skalliert).
-
@@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
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@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
marginwegzubekommen 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-
Juhu,
vielen Dank das war es...
-
-
-
-
-
Hallo,
auf einer mittigen Linie aufgelistet werden.
Für den Fall, dass du mit dem falschen Begriff gesucht hast: deine mittige Linie ist nicht vertikal sondern horizontal.
Gruß
Kalk