このアプリについて
アスペクト比の設定を変更すると画像の縦横比率の見え方とそれを再現するCSS設定値が変化します。
使い方
アスペクト比の変更
主なアスペクト比
主要なアスペクト比(縦横比率)である下記に変更できる。初期値はスクエア(正方形)。
- スクエア(1:1)
- 白銀比(1.414:1)
- 黄金比(1.618:1)
- デジカメ4:3(1.333:1)
- デジカメ3:2(1.5:1)
- デジカメ16:9(1.777:1)
アスペクト比の詳細は下記を参照。
画像の向き
画像サイズ
サイズ(幅)の刻み
プレビュー画像
タイトル
タイトルに現在の設定されているアスペクト比と向きが表示されます。
画像
設定項目の下の画像に設定によって変更されたアスペクト、向き、サイズが反映されます。
CSS
CSSには「width」と「height」の値にも反映されます。なお、画像には「object-fit: cover;」を追加しないと画像がトリミングされないので必ず加えてください。
※参考:私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ!!(→祝・IEサポート終了!) - クモのようにコツコツと
詳細
ブログ
ソースコード(GitHub)
イイダリョウ(作者)
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。
引き続きコツコツの日々。ブログも書いてます。Webづくり やりたい時が 始め時!