Frage zum Wiki-Artikel ‚picture‘

[Picture-Novize]

Hallo liebes Forum,

ich habe eine Frage zu dem Picture-Tag. Ich möchte gerne auf Smartphones im Portrait-Modus das Bild A anzeigen, ansonsten (d.h. Smartphones im Landscape-Modus, Tablets, Desktops) stets das Bild B. Das ist mein Code:

<picture>
  <source 
    media='(max-width: 640px)'
    srcset='bilda.jpg' />
  <img 
    src='bildb.jpg'
  />
</picture>

Auf den Media-Tag max-Width erfolgt bei mir überhaupt keine Reaktion, nur auf min-width. Damit bekomme ich aber nicht elegant hin, was ich möchte...

Bin für Tipps sehr dankbar!

Gruß Picture-Novize

[MrMurphy1]

Hallo

Ich möchte gerne auf Smartphones im Portrait-Modus das Bild A anzeigen, ansonsten (d.h. Smartphones im Landscape-Modus, Tablets, Desktops) stets das Bild B.

Das geht technisch nicht, da mittels CSS nicht die von dir vorgesehenen Geräte ermittelt werden können.

Die Attribute in dem von dir verlinkten Artikel haben andere Aufgaben.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Das geht technisch nicht,

Ich weiß nicht != geht nicht.

da mittels CSS

Mit CSS hat das hier aber auch gar nichts zu tun.

nicht die von dir vorgesehenen Geräte ermittelt werden können.

Dass „vorgesehenen Geräte[klassen]“ Unfug sind, hab ich schon erwähnt.

Die Attribute in dem von dir verlinkten Artikel haben andere Aufgaben.

?? srcset dient zur Angabe einer oder mehrerer Bildressourcen; media auch für Breakpoints.

LLAP 🖖

[Gunnar Bittersmann]

@@Picture-Novize

ich habe eine Frage zu dem Picture-Tag. Ich möchte gerne auf Smartphones im Portrait-Modus das Bild A anzeigen, ansonsten (d.h. Smartphones im Landscape-Modus, Tablets, Desktops) stets das Bild B.

Löse dich von dem Denken in Geräteklassen. Es gibt sie nicht (mehr). Es gibt keine Grenzen, sondern fließende Übergänge.

Und bist du sicher, dass du auf „Tablets“ und „Desktops“ im Hochformat Bild B anzeigen willst (1), und nicht etwa Bild A (2)?

Das ist mein Code:

<picture>
  <source 
    media='(max-width: 640px)'

Vergiss, dass es so etwas wie Pixel gibt! Media-Queries sollten sich nach der Basis-Schriftgröße richten, also in em angegeben werden.

Zur Unterscheidung zwischen Hoch- und Querformat ist max-width aber auch ungeeignet. Dafür gibt es orientation. Für (2):

<picture>
  <source srcset="bilda.jpg" media="(orientation: portrait)"/>
  <img src="bildb.jpg" alt="Alternativtext nicht vergessen!"/>
</picture>

Für (1) mit Maximalbreite kombibiert:

<picture>
  <source srcset="bilda.jpg" media="(orientation: portrait) and (max-width: 40em)"/>
  <img src="bildb.jpg" alt="Alternativtext nicht vergessen!"/>
</picture>

LLAP 🖖

[Picture-Novize]

Vielen Dank für die erhellende Antwort. Diese Lösung funktioniert mit FireFox.

Wie ich gerade festgestellt habe, scheint Safari für iOS 8 "picture" aber noch nicht voll zu unterstützen, daher sind auch meine vorangegangenen Experimente gescheitert. Ich nehme aber an, dass es mit iOS 9 funktioniert.

[Auge]

Hallo

Vielen Dank für die erhellende Antwort. Diese Lösung funktioniert mit FireFox.

Wie ich gerade festgestellt habe, scheint Safari für iOS 8 "picture" aber noch nicht voll zu unterstützen, daher sind auch meine vorangegangenen Experimente gescheitert. Ich nehme aber an, dass es mit iOS 9 funktioniert.

Für solche recherchen ist CanIUse? empfehlenswert. Um auf deine Frage zurückzukommen, nein, tut es nicht.

Tschö, Auge

[Gunnar Bittersmann]

@@Picture-Novize

Ich nehme aber an, dass es mit iOS 9 funktioniert.

Im Zweifel besser nachschlagen.

Es gibt Polyfills.

LLAP 🖖

[Picture-Novize]

@@Picture-Novize

Ich nehme aber an, dass es mit iOS 9 funktioniert.

Im Zweifel besser nachschlagen.

Es gibt Polyfills.

Danke! Mit Hilfe von Picturefill klappt nun auch auf iOS alles, wie es soll!