アスペクト比計算ツール（無料・登録不要）

アスペクト比とは

アスペクト比（縦横比）とは、画像・動画・ディスプレイの幅と高さの比率を表した数値です。「16:9」は幅16に対して高さ9という意味で、現在のHD動画やスマートフォン横向き表示の標準比率です。アスペクト比を保ったままサイズを変更することで、画像の歪みを防ぎます。

GCD（最大公約数）による最簡形式

1920×1080 のアスペクト比は、GCD（最大公約数）= 120 で割ると 16:9 になります。本ツールはGCDを自動計算し、最もシンプルな形式で比率を表示します。例: 1280×1024 → GCD = 256 → 5:4。

主要なアスペクト比の用途

印刷解像度とアスペクト比の関係

印刷では解像度（DPI: Dots Per Inch）が重要です。一般的な印刷品質は 300 DPI。A4（210×297mm）を 300DPI で印刷する場合、必要なピクセル数は幅 2480px × 高さ 3508px。アスペクト比は約 5:7（正確には √2 ≈ 1:1.414）です。

主要印刷サイズ一覧

DPIを考慮したサイズ計算方法

mm → ピクセル の変換: ピクセル = mm × DPI ÷ 25.4。例: A4の幅210mm × 300DPI ÷ 25.4 = 2480px。本ツールの「比率・幅→高さ」モードで1:1.414を入力すれば、A判の縦横を計算できます。

CSS aspect-ratio プロパティ（現代的な方法）

CSS の aspect-ratio プロパティで要素のアスペクト比を維持できます。本ツールで生成したコードをそのまま使用できます。

/* 16:9の場合 */
.element {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* 対応ブラウザ: Chrome 88+ / Firefox 89+ / Safari 15+ */

padding-topハック（旧来の方法・IE対応）

古いブラウザへの対応が必要な場合は padding-top ハックを使います。本ツールのコードコピーから生成できます。

/* 16:9の場合: 9/16 = 56.25% */
.wrapper {
  position: relative;
  padding-top: 56.25%;
  height: 0;
}
.wrapper > .content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

レスポンシブ画像のアスペクト比指定

HTMLの img タグに width と height 属性を明示することで、ブラウザがCLS（レイアウトシフト）を防ぎます。本ツールで比率を確認してから記述することを推奨します。

<img src="photo.jpg" width="1920" height="1080"
  style="width:100%;height:auto;" alt="説明文">