CSSアスペクト比計算機＆レスポンシブ・パディングハック変換ツール
モダンな aspect-ratio 属性およびレガシーな padding-top %ハック比率の自動計算とリアルタイムプレビュー
画像や動画、iframeなどのアスペクト比（縦横比）をレスポンシブウェブデザインで維持するために、標準のCSSコードと、古いブラウザ用の余白パーセンテージ数値を自動算出します。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 幅と高さ의 ピクセル値を入力するか、上部の標準プリセット（16:9、4:3など）をクリックします。
- 約分されたアスペクト比と、対応する padding-top パーセント比率の計算結果を確認します。
- 右側のプレビュー幅スライダーを動かし、縮小しても比率が維持されることを視覚的に検証し、コードをコピーします。
よくある質問
- Paddingを用いた比率維持ハック（Padding Hack）の仕組みは？
- CSSの仕様においてパーセンテージ（%）のパディングは「親要素の横幅」を基準に計算される点を利用し、高さを0にして padding-top を指定することで縦横比を確保する伝統的なテクニックです。
- aspect-ratio プロパティはIEで動作しますか？
- いいえ、Internet Explorer 11以下ではサポートされていません。IEを含む古いブラウザ互換性を考慮するプロジェクトでは、padding-topハック側を使用してください。