aspect-ratio

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Theaspect-ratioCSS media feature can be used to test theaspect ratio of theviewport.

Syntax

Theaspect-ratio feature is specified as a<ratio> value representing the width-to-height aspect ratio of the viewport. It is a range feature, meaning you can also use the prefixedmin-aspect-ratio andmax-aspect-ratio variants to query minimum and maximum values, respectively.

Examples

In the example below, a<div> element is contained in an<iframe>. The iframe creates its own viewport. Resize the<iframe> to seeaspect-ratio in action.

Note that, when none of the media query conditions are true, the background will turn white because none of the below rules will be applied to the<div> inside the<iframe>. See if you can find which width and height values trigger this!

HTML

html

<iframe   srcdoc="<div id='inner'>Watch this element as you resize iframe viewport's width and height.</div>"></iframe>

CSS

css

/* Minimum allowed aspect ratio *//* Select aspect ratios 8/5 = 1.6 and above */@media (min-aspect-ratio: 8/5) {  div {    background: #9999ff; /* blue */  }}/* Maximum allowed aspect ratio *//* Select aspect ratios 3/2 = 1.5 and below */@media (max-aspect-ratio: 3/2) {  div {    background: #99ff99; /* green */  }}/* Exact aspect ratio, put it at the bottom to avoid override */@media (aspect-ratio: 1/1) {  div {    background: #ff9999; /* red */  }}

Result

<label for="w">width:165</label><input name="w" type="range" min="100" max="250" step="5" value="165" /><label for="w">height:165</label><input name="h" type="range" min="100" max="250" step="5" value="165" /><label>aspect-ratio: 165/165 = 1</label><iframe   srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #9999ff; } } @media (max-aspect-ratio: 3/2) { div { background: #99ff99; } } @media (aspect-ratio: 1/1) { div { background: #ff9999; } }</style><div id='inner'> Watch this element as you resize iframe viewport's width and height.</div>"></iframe>

iframe {  display: block;  border: 1px dashed black;}

outer.style.width = outer.style.height = "165px";const updateRatio = () => {  ratio.textContent = `aspect-ratio: ${w.value}/${h.value} = ${(w.value / h.value).toFixed(2)}`;};w.onchange = w.oninput = () => {  outer.style.width = `${w.value}px`;  wf.textContent = `width: ${w.value}`;  updateRatio();};h.onchange = h.oninput = () => {  outer.style.height = `${h.value}px`;  hf.textContent = `height: ${h.value}`;  updateRatio();};

Note themin-aspect-ratio: 8/5 sets thelower bound to 1.6, so this media query selects elements with aspect ratios 1.6 and above. Themax-aspect-ratio: 3/2 sets theupper bound, so this media query selects elements with aspect ratios 1.5 and below. Theaspect-ratio: 1/1 overrides the max aspect ratio rule because it has been declared after and selects elements with aspect ratios exactly1.

From the initial state, as you reduce height, the aspect ratio starts increasing from one. So the div's background color goes from red(1) < green(1.5) < white < blue(1.6).