CSS Media Query Height Greater Than Width and Vice Versa (Or How to Imitate with JavaScript)

CSS media query height greater than width and vice versa (or how to imitate with JavaScript)

As stated prior, media queries are the way to go.

More specifically, if you are attempting to detect if the viewport is taller than it is wide (height > width), you might take a look at the aspect ratio documentation.

For example, let's say you wanted to hide or show a different title based on when the viewport is tall or wide. Since a 1/1 aspect ratio is a perfect square, you can use a combination of min-aspect-ratio and max-aspect-ratio to detect when a change between "tall" and "wide" occurs.

The code might look like this:

@media (max-aspect-ratio: 1/1) {
  body {
    background-color: cornflowerblue;
  }
 
  .wide {
    display: none;
  }
}

@media (min-aspect-ratio: 1/1) {
  body {
    background-color: whitesmoke;
  }
 
  .tall {
    display: none;
  }
}

@media (aspect-ratio: 1/1) {
  .wide {
    display: block;
  }
}

<div class="wrapper">
  <h1 class="tall">I'm taller than I am wide</h1>
  <h1 class="wide">I'm wider than I am tall</h1>
</div>

How can I say height width in a CSS media query?

Use the orientation parameter.

@media (min-width: 400) and (orientation: landscape) { /* rules */ }

Which does the following:

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

Documentation on MDN

Is there an equivalent to background-size: cover and contain for image elements?

Solution #1 - The object-fit property (Lacks IE support)

Just set object-fit: cover; on the img .

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

How do I get dynamically fluid images depending on browser window aspect ratio?

You could also get the aspect in javascript on a regular basis and then add a class to the body object that would specify if it was 4:3, widescreen, or portrait. Then make it run on an interval in case the window changes size.

Example

CSS

.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }

JavaScript

var getAspect = function(){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var aspect = w / h;

    var 43 = 4 / 3;
    var cssClass = "";

    if (aspect > 43) {
        cssClass = "widescreen";
    }
    else if (aspect === 43) {
        cssClass = "43";
    }
    else {
        cssClass = "portrait";
    }

    $("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};

var checkAspect = setInterval(getAspect, 2000);

CSS Media Queries: using comparisons

After some tweaking and testing, I came up with the following combination of media queries that seem to do what I'm trying to accomplish.

@media only screen and (orientation: landscape) and (min-device-aspect-ratio: 1/1)
//This targets any screen that is in true Landscape orientation, including desktop browsers. This should also target square screens where the browser reports landscape orientation.

@media only screen and (orientation: portrait) and (min-device-aspect-ratio: 1/1)
//This targets strictly desktop browsers that have a window resized into what the browser considers "portrait" mode. This works in Chrome, Firefox, and MS Edge (haven't tested others). More specifically, this targets any browser that reports portrait mode, but where the screen is actually in landscape position. This may also target square screens where the browser reports portrait orientation.

@media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1)
//This strictly targets devices that are actually in portrait orientation, mainly mobile devices (although it may target desktops with rotated monitors)

This may also target square screens reported to be in portrait mode, so you may need an additional query that targets exactly square screens.

media query not being applied

@media screen and (max-width:940x) {

is mistake!

@media screen and (max-width:940px) {

Please fix "px" there.

---

Related Topics