Ich verwende in einem Template PICTURE-Tags mit SOURCE-Bildern, also
Code
<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.