Problem mit picture Element

[fozzyozzy]

Guten Morgen.

Ich habe mal wieder ein Problem und brauch bitte Hilfe.

Ich bin gerade dabei mich mit dem picture Element zu beschäftigen und stoße schon wieder auf ein Problem. Nachfolgenden Code habe ich so erstellt:

<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? LG

[Matthias Apsel]

Hallo fozzyozzy,

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?

IE11 kann das nicht, sollte aber trotzdem das Fallback-Bild zeigen. Funktioniert denn unser Wiki-Beispiel?

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Funktioniert denn unser Wiki-Beispiel?

Blöde Frage, die Beispiele sind (noch) nicht ausführbar.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Funktioniert denn unser Wiki-Beispiel?

Blöde Frage, die Beispiele sind (noch) nicht ausführbar.

Es gibt keine blöden Fragen! ;-)

Marc

[Matthias Apsel]

Hallo Matthias Apsel,

Funktioniert denn unser Wiki-Beispiel?

Blöde Frage, die Beispiele sind (noch) nicht ausführbar.

Jetzt ist das erste ein ausführbares Beispiel. Ebenso habe ich noch etwas deutlicher auf das Tutorial hingewiesen.

Bis demnächst
Matthias

[marctrix]

Hej fozzyozzy,

auch Dir einen guten Morgen!

<div class="header">

Das wäre dann wohl das header-Element

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

Was heißt "gar nichts"? Wird überhaupt nichts angezeigt?

Ich habe da jetzt keinen Fehler in dem Code gesehen - kann natürlich auch etwas übersehen haben. Mindestens im Edge sollte das wie in den anderen Browsern laufen, in alten IEs das Fallback.

Vielleicht liegt der Fehler vor dem hier gezeigten Code?

Marc

[fozzyozzy]

Hallo. Ich habe das ja so erstellt wie es im Wiki beschrieben wird. Ich weiss auch das es im IE 11 nicht geht aber das Bild wird ausgegeben. Wie gesagt im Microsoft Edge wird auch das Bild ausgegeben aber eben nicht gewechselt wenn ich die Viewportbreite ändere. Es sind auch verschiedene Bilder die da jeweils ausgegeben werden sollen.

[marctrix]

Hej fozzyozzy,

Ich weiss auch das es im IE 11 nicht geht aber das Bild wird ausgegeben.

Ok, da funktioniert es also wie erwartet.

Wie gesagt im Microsoft Edge wird auch das Bild ausgegeben aber eben nicht gewechselt wenn ich die Viewportbreite ändere.

Ich gehe mit Bilder ja anders um, daher kann ich hier nur raten. Ich weiß von anderen Funktionen, dass die nur refresht werden, wenn die Seite neu geladen wird - vielleicht musst du im Edge die Seite neu laden, um ein anderes Bild zu bekommen...

Marc

[MrMurphy1]

Hallo

Was passiert denn wenn du nach dem Ändern der Viewportbreite die Seite neu lädst? Bei den meisten Browsern mit STRG + F5.

Gruss

MrMurphy

[fozzyozzy]

@MrMurphy

da tut sich garnichts. Die Grafik bleibt Starr an Ort und Stelle

[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 🖖

[fozzyozzy]

@Gunnar Bittersmann

IM Microsoft Edge steht folgendes:

Microsoft Edge 20.10240.16384.0

Ich weiß jetzt nicht ob es da schon wieder ein Update gibt aber normalerweise wird man doch da informiert.

[fozzyozzy]

Also ich hab nun mal weitere Seiten gestestet:

Auch bei diesem Beispiel macht mein Microsoft Edge nichts.

http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_picture

[marctrix]

Hej fozzyozzy,

http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_picture

Wie gesagt: Dein Beispiel scheint in Ordnung zu sein. Jedenfalls was die Auswahl der Bilder betrifft. Dennoch solltest Du den Artikel lesen, den Gunnar verlinkt hat und unbedingt mindestens einen Alternativ-Text verwenden.

Marc

[Richard Rüfenacht]

Hallo fozzyozzy

Auch bei diesem Beispiel macht mein Microsoft Edge nichts.

http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_picture

In meinem Microsoft Edge funktioniert dieses Beispiel perfekt.

Mit besten Grüssen
Richard

[Matthias Apsel]

Hallo Richard Rüfenacht,

In meinem Microsoft Edge funktioniert dieses Beispiel perfekt.

In meinem auch
Microsoft Edge 38.14393.0.0
Microsoft EdgeHTML 14.14393

Bis demnächst
Matthias

[fozzyozzy]

Ja aber doch in meinem nicht. Was kann ich denn jetzt konkret tut um an eine aktuelle MS Edge Version zu kommen? Ich hab im Netz schon überall nachgesehen aber nirgends kann ich mir Edge einzeln Updaten.

[Matthias Apsel]

Hallo fozzyozzy,

Was kann ich denn jetzt konkret tut um an eine aktuelle MS Edge Version zu kommen?

Welches Betriebssystem?

Welchen Edge hast du denn? (Rechts oben die drei Punkte, Eigenschaften und nach unten scrollen, Infos zu dieser App) Hier ist es übrigens noch ein 25.10586.0.0, bei dem geht das auch.

Bis demnächst
Matthias

[Der Martin]

Hi,

Was kann ich denn jetzt konkret tut um an eine aktuelle MS Edge Version zu kommen?

Welches Betriebssystem?

ironische Frage, oder?
IE/Edge ist Windows only, also was soll da die Frage nach einem Betriebssystem?

Ciao,
 Martin

[Matthias Apsel]

Hallo Der Martin,

IE/Edge ist Windows only, also was soll da die Frage nach einem Betriebssystem?

Ich bin mir nicht sicher, ob der Edge nicht sogar Windows10 only ist, deshalb die Frage.

Bis demnächst
Matthias

[Der Martin]

n'Abend,

IE/Edge ist Windows only, also was soll da die Frage nach einem Betriebssystem?

Ich bin mir nicht sicher, ob der Edge nicht sogar Windows10 only ist

meines Wissens ja. Daher erübrigt sich die Frage erst recht.

Ciao,
 Martin

[Matthias Apsel]

Hallo Der Martin,

meines Wissens ja. Daher erübrigt sich die Frage erst recht.

Wikipedia meint auch nur Windows10. Damit erübrigt sich die Frage, obwohl es noch Windows 10 mobile sein könnte.

Bis demnächst
Matthias

[Der Martin]

Hi,

meines Wissens ja. Daher erübrigt sich die Frage erst recht.

Wikipedia meint auch nur Windows10. Damit erübrigt sich die Frage, obwohl es noch Windows 10 mobile sein könnte.

ja, aber zumindest kein Betriebssystem. ;-)

Ciao,
 Martin

[fozzyozzy]

Hallo Freunde. Also es hat lange gedauert aber ich habe das Update hinmbekommen und jetzt wird auch alles mit dem picture Element einwandfrei dargestellt. Danke euch noch einmal für die Hilfe. Ich werde mich bestimmt noch öfters hier melden.

LG