アスペクト比計算

アスペクト比計算ツールとは#

アスペクト比計算ツールは、幅と高さから比率を求めるツールです。ピクセル単位の寸法を2つ入力すると、簡約した比率が小数値や形のプレビュー、コピー用のコードとともに表示されます。

比率を固定している間は形が保たれ、片方の寸法を変えるだけでもう片方に合う寸法が入ります。

使い方#

1. 幅と高さをピクセル単位で入力します。
2. 比率かコードをコピーします。

設定#

• 比率を固定: 現在の形を保ったまま寸法を変えます。幅を変えると高さが、高さを変えると幅が現在の比率から計算されます。オフにすると幅と高さは別々に変わり、比率は2つの寸法に追従します。
• 縦横を入れ替え: 幅と高さを交換し、比率の左右も反転します。どちらかの寸法が無効な間は使えません。

比率プリセット#

プリセットは用途別に分かれています。映像・SNS・写真・デバイスの4グループで、それぞれ比率と代表的な解像度を持ちます。選ぶと両方の寸法と比率が入り、固定がオンになります。

解像度はその用途の代表値です。2560×1080に対する21:9のように、実際の比率がラベルとわずかに異なる場合があります。

コード#

• CSS: aspect-ratio: 16 / 9;の形で、スタイルシートにそのまま書けます。保持している比率の数値が使われます。
• Tailwind: 16:9はaspect-video、1:1はaspect-squareになり、それ以外はaspect-[21/9]の形です。

活用シーン#

• 切り抜きや書き出しの前に、画像や動画の寸法から比率を確かめるとき。
• 16:9の素材を小さい解像度で作り直すなど、同じ比率のまま寸法を変えたいとき。
• 中身が読み込まれる前から枠の形を保つため、比率をCSSに貼るとき。

注意点#

• 寸法は整数です。固定中はもう片方の寸法が最も近い整数に丸められるため、厳密な比率からわずかにずれることがあります。
• 100000を超える寸法は100000として扱われます。

よくある質問#