Bootstrap Karussel Bilder: Andere Bilder nach Displaygröße laden (per srcset, <picture> oder background-image?)

[DonCarlos]

@@DonCarlos

srcset: "<img srcset" fand ich zunächst eine gute Idee.

Streiche „zunächst“ und setze das Verb ins Präsens.

Laut caniuse.com wird es aber von Opera Mini nicht unterstützt.

Ja, und? (Außerdem liegt das in dem gegenüber anderen Browser anderen Rendering begründet.)

Auf Smartphones verwendet die Website im Bootstrap-Karussel kleine, quadratische Bilder. Auf größeren Bildschirmen deutlich breitere Bilder. Bootstrap weist den Bildern width: auto; zu. Im Opera Mini würde also (je nach "Fallback-Bild" in src) entweder ein viel zu riesiges quadratisches Karussel auf großen Bildschirmen oder ein (insbesondere vertikal) viel zu kleines Karussel über die ganze Breite auf Smartphones erscheinen.

Ich weiß nicht ob man ein <img> ohne srcset als Fallback davor schreiben kann.

Nein, das eine img-Element hat sowohl srcset- als auch src-Attribut. Browser, die srcset nicht kennen, ignorieren das und verwenden das in src angegebene Bild (progressive enhancement).

Gut zu wissen!

background-image: Das Problem per CSS Hintergrundbildern zu lösen scheint mir die sauberste Lösung. Ich hab's noch nicht probiert. Geht das?

Das kommt darauf an, um was für ein Bild es sich handelt. Gehört es zum Seiteninhalt, dann ist die Einbindung per img richtig und die Einbindung per CSS falsch. Ist das Bild Dekoration, dann hat hat es im HTML nicht zu suchen, sondern gehört ins CSS.

Bootstrap verwendet (warum auch immer) <img> im Karussel. Vielleicht kann man das durch ein <div> mit Hintergrundbild austauschen. Wenn das einfach geht, reicht mir schon allein die Bestätigung. Dann versuche ich mich mal daran.

<picture>: Lässt sich das im Karussel ohne große Anpassungen verwenden oder zerhaut es mir mein Layout der bootstrap.css?

picture ist für art direction. Und was hat das mit Bootstrap zu tun?

Folge meiner Wissenslücken. <source> hörte sich für mich zunächst interessant an. Lese aber gerade dass picture und source auch nicht vom Opera Mini unterstützt werden.

Und warum überhaupt Bootstrap?

Ich find's gut.

LLAP 🖖

Du auch! Und danke!