使い方
- サイズを変更するには、比率(例:16と9)を入力するか、よく使われる比率を選び、幅または高さを入力します。もう一方の値が計算されます。
- 比率を調べるには、画像、画面、動画の幅と高さを入力します。
- プレビューを確認し、Webレイアウトで必要な場合はCSSのaspect-ratioルールをコピーしてください。
仕組み
縦横比を保ってサイズを変更するには、高さ = 幅 × 比率の高さ ÷ 比率の幅(またはその逆)で計算します。ピクセルサイズは通常整数のため、結果は丸められることがあります。16:9の比率で幅が1000の場合のように割り切れないとき、丸め後の高さ(563)は近似値であり、厳密に一致するわけではありません。
サイズを簡単な比率にするには、両辺を最大公約数で割ります。1920と1080はどちらも120で割れるため、16:9になります。実際のサイズには、よく知られた比率に簡約できないものもあります。1366×768は正確には683:384で、16:9に非常に近いため、このツールでは差が2 %以内の場合、最も近い一般的な比率も表示します。同様に、「21:9」モニターの実際の比率は64:27(2560×1080)または43:18(3440×1440)であり、21:9は販売上の名称です。
CSSでaspect-ratio: 16 / 9を指定すると、幅が変わっても要素の縦横比が保たれます。動画の埋め込みや、読み込み中にレイアウトがずれないようにする画像プレースホルダーに便利です。
使用例
動画サムネイルのサイズ
幅1280ピクセルの16:9サムネイルに必要な高さは720ピクセルです。
画面の縦横比を確認
2560×1600を簡約すると8:5になり、ノートパソコンで一般的な16:10と同じ比率です。
SNS向けの縦長トリミング
比率が4:5で幅が1080の場合、高さは1350です。多くのフィードで使える縦長サイズです。
よくある質問
16:9と1.78:1は同じですか?
はい。16 ÷ 9 ≈ 1.778なので、どちらも同じ形を表します。映画の画面比率は、2.39:1のように小数で示されることもよくあります。
結果に小数が表示されるのはなぜですか?
比率によっては、すべての幅を割り切れるとは限りません。ピクセル単位のサイズでは丸めを有効にしてください。結果は最も近い整数ピクセルになり、正確な比率からわずかにずれることがあります。
CSSのaspect-ratioプロパティはどのブラウザーでも使えますか?
現在の主要なブラウザーすべてでサポートされています。ただし、要素の幅と高さの両方が明示的に設定されている場合は、そちらがaspect-ratioより優先されます。
プライバシー
計算はすべてブラウザー内で行われます。データが送信・保存されることはありません。