Tags Picture, Source. Ermittlung des aktuell im Browser angezeigten Bildes.

Ich verwende in einem Template PICTURE-Tags mit SOURCE-Bildern, also

<picture>
 <source srcset="images/stories/taetigkeitsprofil_f_small.jpg" media="(max-width: 320px)">
 <source srcset="images/stories/taetigkeitsprofil_f_medium.jpg" media="(max-width: 360px)">
 <source srcset="images/stories/taetigkeitsprofil_f_large.jpg" media="(max-width: 480px)">
 <source srcset="images/stories/taetigkeitsprofil_f_x-large.jpg">
 <img src="images/stories/taetigkeitsprofil_f_x-large.jpg" alt="">
</picture>

Der Browser zeigt also je nach Bildschirmgöße, gesteuert über die media-Angaben, das entsprechende Bild. Bis zu einer Screen-Breite von 320px z.B. das Bild "taetigkeitsprofil_f_small.jpg".

Weiß jemand, ob und wie man, bspw. per Javascript, abfragen kann, welches Bild da gerade vom Browser verwendet wird? Und zwar auf möglichst direktem Weg.

Ich kann natürlich die Bildschirmbreite ermitteln, dann die media-Angaben oben durchknattern und nach Abgleich aus dem zugehörigen srcset das Bild ermitteln. Das ist jedoch für die Seite, an der ich gerade sitze, nicht praktikabel.

Vielleicht weiß ja wer was Schickes.

Eigetlich ganz einfach, wenn's nicht so viele blöde Broswer gäbe, die nix damit anfangen können:

https://stackoverflow.com/ques…ag-source-with-javascript

Vielen Dank, astrid !

Nach etwas Stüdiüm der Links verschiebe ich den Einsatz meiner "dollen Idee" lieber noch etwas und red das dem Kunden aus, was er gerne hätte. Leider ist auch die Library abhängig von Browserunterstützung von Mutation Observers und ich müsste mich wahrscheinlich auch mit veralteten "Mutation Events" beschäftigen als Fallback und hab noch nicht mal Möglichkeit, das dann ohne Zusatzkosten richtig zu testen. Und IE11 hat genau da einen Bug, womit ich gerne "rumgespielt" hätte. Und IOS6 einen, den ich noch nicht mal verstehe

Und da ich bei beiden Begriffen wegen Noch-Nie-Gehört schon Tränen in die Augen bekomme...