CSS Aspect Ratio Generator

aspect-ratioプロパティのビジュアルプレビュー付きCSS生成ツール。

プリセット

幅 (Width)

高さ (Height)

プレビュー

16:9

モダン CSS

.element {
  aspect-ratio: 16 / 9;
}

レガシー (IE対応)

.element {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.element > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML例

<div class="element">
  <img src="image.jpg" alt="..." />
</div>

使い方

アスペクト比を設定してCSSコードを生成。モダンブラウザ向けの aspect-ratio プロパティと、 IE対応のレガシーコード（padding-bottom トリック）の両方を提供します。画像や動画の埋め込みに最適です。

ブラウザ対応

aspect-ratio: Chrome 88+, Firefox 89+, Safari 15+
padding-bottom方式: すべてのブラウザ (IE含む)