▭

CSS アスペクト比ボックス

padding フォールバック付きのレスポンシブなアスペクト比ボックスを生成します。

ファイルはこの端末に残ります

ファイルはブラウザ内で処理され、アップロードされません。ツールの実行に必要なコードと素材はダウンロードされます。アカウントも追跡もありません。

ダウンロードを使うと、このツールを1つのHTMLファイルに保存してオフラインで使えます。

幅

高さ

プレビュー

出力

このツールについて

幅と高さの比率を入力すると、レスポンシブなアスペクト比ボックスを生成します。最新の aspect-ratio CSS と padding-top パーセンテージのフォールバックの両方を出力し、すべてブラウザ内で完結します。

padding-top のフォールバックを含める理由は？

padding-top パーセンテージのテクニックは、最新の aspect-ratio プロパティに対応していない古いブラウザでも固定のアスペクト比を再現します。

比率は簡約されますか？

はい。16 と 9 のような値は最大公約数で約分されるため、1920 × 1080 は 16 / 9 と表示されます。