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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
aspect-ratio media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報