アスペクト比ジェネレーター

黄金比、白銀比、デジカメサイズなどの見え方とCSS設定値を調べることができます。

このアプリについて

アスペクト比の設定を変更すると画像の縦横比率の見え方とそれを再現するCSS設定値が変化します。

使い方

アスペクト比の変更

主なアスペクト比

主要なアスペクト比(縦横比率)である下記に変更できる。初期値はスクエア(正方形)。

  • スクエア(1:1)
  • 白銀比(1.414:1)
  • 黄金比(1.618:1)
  • デジカメ4:3(1.333:1)
  • デジカメ3:2(1.5:1)
  • デジカメ16:9(1.777:1)

アスペクト比の詳細は下記を参照。

※参考:【黄金比、白銀比】代表的なアスペクト比(縦横比率)を一覧にしてみた - クモのようにコツコツと

画像の向き

横向き、縦向きに変更できる。初期値は横向き。

画像サイズ

10px〜1000pxの間で画像サイズを変更できる。初期値は600px(画面幅が900pxに満たない場合はその中の最大幅)

サイズ(幅)の刻み

画像サイズ(幅)を変更する刻みを1px、5px、10pxから変更できる。初期値は10px。

プレビュー画像

タイトル

タイトルに現在の設定されているアスペクト比と向きが表示されます。

画像

設定項目の下の画像に設定によって変更されたアスペクト、向き、サイズが反映されます。

CSS

CSSには「width」と「height」の値にも反映されます。なお、画像には「object-fit: cover;」を追加しないと画像がトリミングされないので必ず加えてください。

※参考:私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ!!(→祝・IEサポート終了!) - クモのようにコツコツと

詳細

ブログ

【React】アスペクト比ジェネレーターを作った(画像の縦横比率を計算するツール) - クモのようにコツコツと

ソースコード(GitHub)

aspect-ratio-generator

イイダリョウ(作者)

フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。
引き続きコツコツの日々。ブログも書いてます。Webづくり やりたい時が 始め時!