CSS aspect-ratio ビジュアライザー
比率を選んでコンテナ幅スライダーを動かすと、高さが自動追従する様子を体感できる。
アスペクト比を入力
:
= 1.78（16:9）
プリセット
YouTube・Vimeo 動画、PC モニター（FHD/4K）
コンテナ幅
16:9 (1.78)
幅 480px × 高さ 270px
CSS コード
.element {
aspect-ratio: 16 / 9;
width: 100%;
}
/* 古い手法との比較（参考） */
/*
.element-old {
position: relative;
padding-top: 56.25%;
}
.element-old > * {
position: absolute;
inset: 0;
}
*/使い方
- プリセットボタンで比率を選ぶか、幅・高さの数値を直接入力してください
- 「コンテナ幅」スライダーを左右にドラッグすると、プレビューの幅が変化しながら比率を保った高さが自動追従する様子を確認できます
- 「CSS をコピー」ボタンで出力されたコードをコピーして、自分のプロジェクトに貼り付けられます
- カスタムプリセットを選んで独自の比率（例: 17:10）を試してみましょう