Problem mit picture Element

[Gunnar Bittersmann]

@@fozzyozzy

<div class="header">
    <picture>
        <source media="(min-width: 64.000em)" srcset="images/logo/logo_1024.png">
        <source media="(min-width: 50.000em)" srcset="images/logo/logo_800.png">
        <source media="(min-width: 37.500em)" srcset="images/logo/logo_600.png">
               
        
        <!---Fallback--->
        <img src="images/logo/logo_1024.png" srcset="images/logo/logo_1024.png" alt="">
    </picture>
</div>

Vom Verhalten her funktioniert das alles im Chrome, Firefox und Opera wunderbar nur im Microsoft Edge und im IE11 geht da garnichts.

Was mache ich falsch?

Du hast den Alternativtext vergessen.

Ansonsten machst du bei der Problembeschreibung etwas falsch.

Im IE sollte unabhängig von der zur Verfügung stehenden Breite fürs Bild stets logo_1024.png angezeigt werden. Das ist nicht falsch, sondern fallback – auch wenn die ersten 3 Buchstaben übereinstimmen.

Edge sollte die media queries beachten. Es sei denn, du hast ein Update verpasst.

Oder müssen die source-Elemente in umgekehrter Reihenfolge stehen – von klein nach groß?

Zu den media queries wäre zu sagen, dass die Nullen hinter dem Komme sinnlos sind. 64em, 50em, 37.5em.

Ansonsten könnte noch falsch sein, dass du überhaupt picture/source einsetzt anstatt das srcset-Attribut fürs img-Element. Siehe Responsive Images Done Right: A Guide To <picture> And srcset.

LLAP 🖖