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.

aspect-ratioCSSメディア特性で、ビューポートのアスペクト比を調べるために使用します。

構文

aspect-ratio 特性は、ビューポートの幅対高さのアスペクト比を表現する <ratio> 値で指定します。これは範囲の特性であり、接頭辞の付いた min-aspect-ratio および max-aspect-ratio の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

以下の例は独自のビューポートを生成する <iframe> に含まれています。 <iframe> の大きさを変更して aspect-ratio の変化を確認してください。

なお、メディアクエリーの条件がどれも true でない場合、背景は白になります。これは、以下のルールが <iframe> 内の <div> に適用されないためです。どの幅と高さの値がこれを起こすのか、見つけてみてください。

HTML

html
<div id="inner">
  ビューポートの幅と高さを変更しながら、この要素を見ていてください。
</div>

CSS

css
/* 最小アスペクト比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* 最大アスペクト比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /* cyan */
  }
}

/* 正確なアスペクト比。上書きを防ぐために最下部に配置 */
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

結果

仕様書

Specification
Media Queries Level 4
# aspect-ratio

ブラウザーの互換性

BCD tables only load in the browser

関連情報