CSS Image-Size via media query: Diskrepanz mit Viewport

[Tersus]

Seid gegrüßt,

Ich wollte in meiner WebApp Bilder je nach verfügbarer Auflösung anzeigen. Nun gibt es Geräte, deren Breite in Pixeln deutlich größer ist als die, die per Viewport angeboten wird. Das führt dazu, dass Bilder mit zu geringer Auflösung gegriffen werden, welche dann gestreckt werden und unscharf sind.

Folgendes Beispiel-Styling:

@media (max-width: 320px) {
    .myImage {
        background-image: url(../images/small_res.png);
    }
}
@media (max-width: 640px) {
    .myImage {
        background-image: url(../images/medium_res.png);
    }
}

Manches Gerät, wie u.a. ein gewisses iPhone, hat 640px in der Breite; sein Viewport bietet aber nur 320px an.
Laut dem definierten Query wird nun das Bild mit der kleineren Auflösung gegriffen und dann vom Viewport automatisch aufs doppelte gestreckt.

Gibt es eine Möglichkeit per CSS die tatsächliche Auflösung des Gerätes abzufangen oder eine andere gängige Vorgehensweise, dieses Problem in den Griff zu bekommen?

 

[benneq]

Dann arbeite doch mit device-width: https://wiki.selfhtml.org/wiki/CSS/Media_Queries#device-width

 

[Tersus]

@benneq
Perfekt!

 

[Tourgott]

Oder noch einfacher mit vh und vw https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh

 

[Tersus]

@Tourgott
Na das ist Blödsinn, weil bei vh und vw die Größe des Viewports heran gezogen wird.

 

[Tourgott]

Nur weil du nicht weißt wie man damit umgeht, ist es nicht Blödsinn. Sorry, dass ich helfen wollte.

 

[marcOcram]

@Tourgott kannst du mal ein Beispiel nennen wie man anhand von vh/vw ein Bild mit einer anderen Auflösung auswählt bzw. einen gleichgestellten Effekt erzielt? Ich komm nicht drauf.

 

[Tersus]

@Tourgott
Sorry, das "Blödsinn" von mir war gar nicht so böse und persönlich gemeint, wie du es aufgefasst hattest.
Von daher alles gut.