CSS media query to detect width double the height?

css, media-queries

Solution

See the `min-aspect-ratio` and `max-aspect-ratio` CSS media queries:

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

You can then use CSS to specify a different image (as a background image) based on the aspect ratio.

/* 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(...)}
}

Problem

Hi I have a full screen web app (site) and some people have really wide screens, or regular screens with a bunch of toolbars in their browser that makes the width of the viewable area over double the height, and I want to load different images for that case. Is there a way to do something like min-device-aspect-ratio: 2 or width >= height * 2 ?

Original source