[ERLEDIGT] Unterschiedliche Bilder bei unterschiedlichen Auflösungen

[annsen]

Hallo,

der Titel sagt es schon - ich möchte 4 Bilder auf meiner Seite anzeigen und sowohl Anordnung als auch Motiv sollen sich bei bestimmten BreakPoints ändern. Das Ganze soll ohne JS funktionieren.

Die Anordnung mach ich ganz einfach mit Flexbox, aber wie tausche ich AM SINNVOLLSTEN die Motive aus. Mir fallen da aktuell 2 Möglichkeiten ein:

1. ich mache Hintergrundbilder daraus und tausche Sie übers CSS (das ist semantisch "leider" Müll)
2. ich mache das per "display: none;" - also jede Auflösung bekommt ihr eigenes div und dann wird ausgeblendet/eingeblendet, was das Zeug hält...

Gibt es noch eine bessere/korrektere Variante?

Vielen Dank für Tipps und Hinweise!

 

[Tronjer]

Direkt im HTML mittels srcset.

 

[Lupus_III]

Schau mal hier => https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

 

[annsen]

Vielen Dank für die Rückinfos und den Link. Ich habe jetzt ein bisschen was getestet um erstmal einen groben Überblick zu bekommen aber - man - das ist echt ein (für mich) ziemlich komplexes Thema.

Ich bin folgendermaßen vorgegangen.
Ich habe mir Testgrafiken in Illustrator angelegt

• Größe S (300x150px),
• Größe M (300x300px) und
• Größe L (300x600px).

Dazu dann das HTML:

<picture>
    <source media="(max-width: 399px)" srcset="_img/indexbild_s.jpg">
    <source media="(max-width: 799px)" srcset="_img/indexbild_m.jpg">
    <source                            srcset="_img/indexbild_l.jpg">

    <img class="" src="_img/indexbild_fallback.jpg" alt="" />
</picture>

Jetzt habe ich ein Mobiltelefon, das laut Datenblatt eine Auflösung von 1080x1620px (434ppi) hat. Eine DPR-Angabe habe ich leider ncht gefunden.
Dieses Smartphone zeigt, egal ob im Standard- oder Landscape-Modus, das "indexbild_m" (Anzeige lt. HTML von 400-799px). Wenn ich den max-width-Wert auf 413px erhöhe, wird das "indexbild_s" angezeigt.

Ein Tablet mit der Auflösung 2560x1600px (280ppi) zeigt im Landscape-Modus das "indexbild_l" (Anzeige lt. HTML ab 800px) und im Portraitmodus das "indexbild_m" (Anzeige von 400-799px).

Der Sachverhalt mit dem Wechsel der Bilder funktioniert aber ich würde gern wissen, warum es so funktioniert, wie es grad läuft.

PS: in der Responsive-Ansicht im Inspektor, werden die Grafiken korrekt angezeigt - jeweils in den gewünschten Pixelbereichen.

 

[annsen]

Falls irgendjemand ebenfalls mal das Problem haben solle - der Fehler war, dass ich (warum auch immer) in den MediaQueries "min-device-width" statt "min-width" genutzt habe. Das falsche CSS hat dann (eigenartigerweise nur bei iPhone 5/6/7/8 im LS-Modus) dazu geführt, dass die Anordnung der Bilder nicht wie gewünscht stattgefunden hat - die Auswahl der Bilder (das HTML war ja korrekt (max-width)) aber schon.