アスペクト比計算
幅×高さや比率から約分した比率とCSS aspect-ratioを計算します。解像度の貼り付けや比率ロックにも対応。入力はブラウザ内だけで完結します。
例(クリックで試す)
—
比率
—
CSS aspect-ratio
—
小数(W/H)
使い方
幅・高さを入力するか、例チップを選びます。「解像度を貼り付け」欄に 1920×1080 のような表記を貼ると幅・高さが自動入力されます。比率ロックをオンにすると、片方の値を変えたとき他方が同じ比率で再計算されます。
具体例
- 1920×1080 → 16:9 /
aspect-ratio: 16 / 9 - 1080×1080 → 1:1 /
aspect-ratio: 1 / 1 - 1024×768 → 4:3 /
aspect-ratio: 4 / 3 - 1080×1920 → 9:16(縦動画・ストーリー向け)
- 比率ロック ON で幅 1280 に変更 → 高さ 720(16:9を維持)
よくある質問
入力データはサーバーに送信されますか?
いいえ。計算はすべてブラウザ内で完結し、外部に送信・保存されません。
1920×1080は何の比率ですか?
1920:1080は最大公約数で約分すると16:9です。CSSでは aspect-ratio: 16 / 9 と書きます。
CSS aspect-ratioの書き方は?
約分後の幅:高さをスラッシュ区切りで指定します。例: 16 / 9、4 / 3、1 / 1。小数(1.7778)より整数比の方が意図が伝わりやすいです。
比率ロックは何に使いますか?
16:9など比率を固定したまま、幅だけ変えて高さを自動計算できます。動画の書き出し解像度を比率を保って調整するときに便利です。