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 ⁨Juli 2015⁩.

Die aspect-ratio CSS Medienfunktion kann verwendet werden, um das Seitenverhältnis des Ansichtsfensters zu testen.

Syntax

Die aspect-ratio-Funktion wird als ein <ratio> Wert spezifiziert, der das Breite-zu-Höhe-Verhältnis des Ansichtsfensters darstellt. Es handelt sich um eine Bereichsfunktion, was bedeutet, dass Sie auch die Varianten min-aspect-ratio und max-aspect-ratio verwenden können, um Mindest- und Höchstwerte abzufragen.

Beispiele

Im folgenden Beispiel ist ein <div>-Element in einem <iframe> enthalten. Das iframe erstellt sein eigenes Ansichtsfenster. Ändern Sie die Größe des <iframe>, um aspect-ratio in Aktion zu sehen.

Beachten Sie, dass, wenn keine der Bedingungen der Medienabfrage zutrifft, der Hintergrund weiß wird, da keine der unten stehenden Regeln auf das <div> innerhalb des <iframe> angewendet werden. Sehen Sie, ob Sie herausfinden können, welche Breiten- und Höhenwerte dies auslösen!

HTML

html

<iframe
  id="outer"
  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 */
  }
}

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" />
<label id="ratio">aspect-ratio: 165/165 = 1</label>

<iframe
  id="outer"
  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();
};

Beachten Sie, dass min-aspect-ratio: 8/5 die untere Grenze auf 1,6 setzt, so dass diese Medienabfrage Elemente mit Seitenverhältnissen von 1,6 und höher auswählt. Die max-aspect-ratio: 3/2 setzt die obere Grenze, so dass diese Medienabfrage Elemente mit Seitenverhältnissen von 1,5 und darunter auswählt. Die aspect-ratio: 1/1 überschreibt die Regel für das maximale Seitenverhältnis, da sie danach deklariert wurde und wählt Elemente mit einem Seitenverhältnis von genau 1.

Vom Anfangszustand aus, je mehr Sie die Höhe reduzieren, desto mehr beginnt das Seitenverhältnis von eins zu steigen. Dadurch ändert sich die Hintergrundfarbe des div von rot(1) < grün(1.5) < weiß < blau(1.6).

Spezifikationen

Specification
Media Queries Level 4 # aspect-ratio

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden