Widely available すべての主要ブラウザで対応済み。安心して使用可能。
その他 Widely available

aspect-ratio

CSS の aspect-ratio プロパティは要素の推奨アスペクト比を設定します。レスポンシブなメディアコンテナに有用です。

その他

概要

CSS の aspect-ratio プロパティは要素の推奨アスペクト比を設定します。レスポンシブなメディアコンテナに有用です。

対応ブラウザ

デスクトップ

Chrome 88+
Edge 88+
Safari 15+
Firefox 89+

モバイル

Chrome Android 88+
Safari iOS 15+
Firefox Android 89+

基本構文

HTML 
<style>
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}
</style>
<div class="video-container"></div>

実務での使いどころ

  • aspect-ratio の活用

    CSSのアスペクト比プロパティ。要素の縦横比を指定。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク