📐 CSSアスペクト比計算機＆レスポンシブ・パディングハック変換ツール

使い方

1. 幅と高さのピクセル値を入力するか、上部の標準プリセット（16:9、4:3など）をクリックします。
2. 約分されたアスペクト比と、対応する padding-top パーセント比率の計算結果を確認します。
3. 右側のプレビュー幅スライダーを動かし、縮小しても比率が維持されることを視覚的に検証し、コードをコピーします。

よくある質問

Paddingを用いた比率維持ハック（Padding Hack）の仕組みは？

CSSの仕様においてパーセンテージ（%）のパディングは「親要素の横幅」を基準に計算される点を利用し、高さを0にして padding-top を指定することで縦横比を確保する伝統的なテクニックです。

aspect-ratio プロパティはIEで動作しますか？

いいえ、Internet Explorer 11以下ではサポートされていません。IEを含む古いブラウザ互換性を考慮するプロジェクトでは、padding-topハック側を使用してください。

生成されたコードに画像を入れると、比率が崩れて引き伸ばされたように見えるのはなぜですか?

aspect-ratioプロパティ(またはpadding-topハック)は「コンテナ」自体の比率を固定するだけです。中の画像をその比率に合わせて切り抜いたり収めたりするには、画像要素にobject-fit: cover(またはcontain)プロパティを別途指定する必要があります。