CSS・フロントエンド開発ツール

アスペクト比計算

画像やコンテナーのアスペクト比を計算し、比率から未確定の幅や高さも求められます。

入力値

ブラウザー内で処理

リアルタイムプレビュー

設定を変更すると自動更新
選択またはコピーできます

幅と高さを最も簡単な比に約分し、比率と一方の寸法からもう一方も計算できます。

入力内容はお使いのブラウザー内だけで処理され、サーバーには送信されません。

このツールについて

「比率を計算」と「もう一方の寸法を計算」の2つのモードがあります。前者は幅と高さを最も簡単な整数比にし、後者は比率を保ったまま未確定の辺を求め、読みやすい小数で表示します。

使い方

  1. 「比率を計算」または「もう一方の寸法を計算」を選びます。
  2. 比率を求める場合は、幅と高さを正の安全な整数で入力します。
  3. 寸法を求める場合は、正の整数の比率と、既知の幅または高さを入力します。既知の寸法には正の小数も使えます。
  4. 比率、寸法、プレビューを確認し、結果をコピーします。

使用例

  • 1920:1080のGCDは120で、約分すると16:9、小数の比率は約1.7778です。
  • 1024:768 → 4:3、1080:1920 → 9:16。
  • 比率16:9、既知の幅1920 → 高さ1080。

計算の仕組み

整数の幅と高さに対してユークリッドの互除法で最大公約数GCDを求め、両辺をGCDで割ります。比率の約分では、小数や大きすぎる整数による精度の曖昧さを避けるため、正の安全な整数だけを受け付けます。W:Hの比率から寸法を求める式は、高さ = 幅 × H / W、幅 = 高さ × W / Hです。既知の寸法には正の小数も使え、出力は小数点以下最大6桁です。入力と出力は同じ寸法単位になります。

主な用途

  • 画像、動画、キャンバスのアスペクト比を確認する。
  • 比率を保ったまま素材を拡大・縮小する。
  • CSSのaspect-ratioを設定する前に寸法を確認する。

プライバシーについて

入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。

FAQ

1920×1080の比率はいくつですか?

16:9です。1920と1080の最大公約数は120なので、両方を120で割ると求められます。

1080×1920が9:16になるのはなぜですか?

アスペクト比は幅:高さの順です。幅と高さを入れ替えると比率も入れ替わり、縦長の画面を表します。

16:9から高さを求めるにはどうしますか?

高さ = 幅 × 9 / 16で計算します。例えば幅が1920なら、高さは1080です。

寸法に0や小数は使えますか?

0と負の値は使えません。最も簡単な比を求める場合、幅と高さは正の安全な整数が必要です。寸法を求める場合の既知の寸法には正の小数も使えますが、比率の両辺は正の整数で指定します。

開発者向けツール一覧に戻る