Query media CSS per rilevare larghezza doppia l'altezza?

Question

Ciao Ho un'app web a schermo intero (sito) e alcune persone hanno schermi molto ampi, o schermi regolari con un gruppo di barre degli strumenti nel loro browser che rende la larghezza dell'area visibile più del doppio dell'altezza, e voglio caricare immagini diverse per quel caso.

C'è un modo per fare qualcosa di simile min-device-aspect-ratio: 2 o larghezza> = altezza * 2 ?

Answer 1

Vedi le media query CSS min-aspect-ratio e max-aspect-ratio:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

è quindi possibile utilizzare i CSS per specificare un'immagine diversa (come immagine di sfondo) sulla base del rapporto di aspetto.

/* regular, default image */ 
#myImage {background-image: url(...)} 

/* image to use when screen width is more than double the height */ 
@media screen and (min-aspect-ratio: 2/1) { 
    #myImage {background-image: url(...)} 
}