CSS aspect-ratio 属性

定義と使用法

aspect-ratio 属性は、要素の幅と高さの比率を定義することができます。

属性が設定されている場合、 aspect-ratio および width 属性の高さは定義された長宽比に従って調整されます。

この属性についてよりよく理解するために、 aspect-ratio 属性について、デモをご覧ください。

ヒント：レスポンシブレイアウトで使用 aspect-ratio 属性は、要素のサイズが頻繁に変更される場合に、幅と高さの間の比率を保つことを望む場合に適しています。

インスタンス

例 1

要素に長宽比を追加：

div {
  aspect-ratio: 3 / 2;
}

実際に試してみる

例 2

div 要素のサイズが変更される必要がある場合、aspect-ratio この属性は div 要素の幅と高さの比率を制御するのに非常に適しています。例えば、画像ライブラリでは、div 要素のサイズはすべてのデバイスに適応できるように柔軟に設定したいが、同時に画像の幅と高さの比率を保ちたいです：

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

実際に試してみる

CSS 文法

aspect-ratio: number/number|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

チュートリアル：CSS グリッドレイアウトモジュール

参照：CSS Object-fit 属性

参照：CSS Object-position 属性