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-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