01 / HERO16:9
横長
50% 50%CSS IMAGES · RESPONSIVE CROPPING
CSS Image Focal Point Lab
画像の残したい位置を選び、枠ごとの切り抜きを比べる。
014 ASPECT RATIOS
LIVE IMAGE CROP TEST
同じ画像を、4つの枠で見る
FOCAL POINT
残したい部分を選ぶ
LIVE CROPS
同じ画像でも、枠の形で見え方が変わる
02 / CARD1:1
正方形
50% 50%03 / POSTER4:5
縦長
50% 50%04 / STORY9:16
ストーリー
50% 50%枠ごとに object-position が違うのは、同じ被写体を中央へ寄せるためです。
02
WHICH METHOD?
画像の扱いを分けて考える
枠いっぱいに見せる
余白を出さず、枠からはみ出す部分を切り取ります。
画像全体を見せる
切り取らずに収めます。枠には余白が残る場合があります。
構図ごと変えたい
位置調整だけで足りない場合は、画面条件に応じて別の画像を使います。