⚙️ サイズ & 比率設定
👁️ リアルタイムプレビュー 16 : 9
16 : 9
1920 × 1080 px
小数値: 1.778 (幅 ÷ 高さ)
逆比率: 0.5625 (高さ ÷ 幅)
Padding-top換算: 56.25%
幅や高さの入力から比率を割り出し、現代的な aspect-ratio プロパティおよび iframe・YouTube用のレスポンシブ埋め込みコード（パディングハック）を自動生成します。
aspect-ratio: 16 / 9;
width: 100%;
max-width: 1920px;
object-fit: cover;.aspect-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* (9 / 16) * 100% */
height: 0;
}
.aspect-container iframe,
.aspect-container video,
.aspect-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}作業効率を高める高解像度・ウルトラワイドモニターやモニターアーム
Amazonで人気のPCモニター・4Kディスプレイを探すaspect-ratio: 幅 / 高さ; をサポートしています。CLS（レイアウトシフト）防止にも極めて効果的です。padding-top や padding-bottom のパーセンテージ指定は、親要素の「横幅」を基準に計算される仕様を利用したレスポンシブ技法です。