How to fetch aspect ratio within HTML and CSS?

Question

Responsive website depends on @media queries which takes value in terms of pixels or screen type.

Is there a way to set media query using aspect ratio of the screen that is being used? How?

Also how to fetch or calculate the aspect ratio of the current screen on which the web page is being displayed from HTML and CSS?

Welcome to Stack Overflow! Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Mar 19 '22 at 13:04

Roko C. Buljan · Accepted Answer · 2022-03-19T13:26:59.867

Sadly there's no such thing in CSS like sw or sh to get the screen width / height.
JS to the rescue!

const set_AR = (el) => el.style.aspectRatio = screen.width / screen.height;

set_AR(document.querySelector("#emulator"));

#emulator {
  --scale: 0.6;
  max-width: calc(100vw * var(--scale));
  max-height: calc(100vh * var(--scale));
  background: #000;
}

<div id="emulator"></div>

1 Answers1