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.

Die aspect-ratio CSS Media-Feature kann verwendet werden, um das Seitenverhältnis des Viewports zu testen.

Syntax

Das aspect-ratio-Feature wird als ein <ratio> Wert angegeben, der das Breite-zu-Höhe-Verhältnis des Viewports darstellt. Es ist ein Bereichs-Feature, was bedeutet, dass Sie auch die präfixierten Varianten min-aspect-ratio und max-aspect-ratio verwenden können, um minimale bzw. maximale Werte abzufragen.

Beispiele

Das untenstehende Beispiel befindet sich in einem <iframe>, das seinen eigenen Viewport erstellt. Ändern Sie die Größe des <iframe>, um aspect-ratio in Aktion zu sehen.

Beachten Sie, dass der Hintergrund weiß wird, wenn keine der Medienabfragebedingungen zutrifft, da keine der untenstehenden Regeln auf das <div> im <iframe> angewendet wird. Sehen Sie, ob Sie herausfinden können, welche Breiten- und Höhenwerte dies auslösen!

HTML

html

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

CSS

css

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /* cyan */
  }
}

/* Exact aspect ratio, put it at the bottom to avoid override*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

Ergebnis

<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />

<iframe
  id="outer"
  srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #9af; } } @media (max-aspect-ratio: 3/2) { div { background: #9ff; } } @media (aspect-ratio: 1/1) { div { background: #f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>">
</iframe>

iframe {
  display: block;
}

outer.style.width = outer.style.height = "165px";

w.onchange = w.oninput = () => {
  outer.style.width = `${w.value}px`;
  wf.textContent = `width: ${w.value}`;
};
h.onchange = h.oninput = () => {
  outer.style.height = `${h.value}px`;
  hf.textContent = `height: ${h.value}`;
};

Spezifikationen

Specification
Media Queries Level 4 # aspect-ratio

Browser-Kompatibilität

BCD tables only load in the browser