Медиавозможность CSS `aspect-ratio`

aspect-ratio CSS-медиавозможность media feature позволяет проверить соотношение сторон области просмотра.

Синтаксис

Медиавозможность aspect-ratio задаётся значением <ratio>, представляющим соотношение ширины и высоты области просмотра. Это функция диапазона, поэтому для проверки минимальных и максимальных значений также можно использовать варианты с префиксами min-aspect-ratio и max-aspect-ratio соответственно.

Примеры

В примере ниже элемент <div> находится внутри <iframe>. Iframe создаёт собственную область просмотра. Измените размер <iframe>, чтобы увидеть aspect-ratio в действии.

Обратите внимание: если ни одно из условий медиазапросов не выполняется, фон станет белым, поскольку ни одно из правил ниже не будет применено к <div> внутри <iframe>. Попробуйте определить, какие значения ширины и высоты вызовут это!

HTML

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

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 */
  }
}

Результат

<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();
};

Обратите внимание: min-aspect-ratio: 8/5 задаёт нижнюю границу 1.6, поэтому этот медиазапрос выбирает элементы с соотношением сторон 1.6 и выше. max-aspect-ratio: 3/2 задаёт верхнюю границу, поэтому этот медиазапрос выбирает элементы с соотношением сторон 1.5 и ниже. aspect-ratio: 1/1 переопределяет правило максимального соотношения сторон, поскольку объявлено после него, и выбирает элементы с соотношением сторон, равным 1.

В исходном состоянии при уменьшении высоты соотношение сторон начинает увеличиваться от единицы. Поэтому цвет фона div меняется от красного (1) < зелёного (1.5) < белого < синего (1.6).

Спецификации

Совместимость с браузерами

См. также

• Понимание aspect-ratio
• Использование медиазапросов
• @media