CSS ｜ 画像の縦横比を変えずに枠にピッタリ表示する方法
widthとheightを指定すると画像が伸びてしまう問題
imgを囲っているdivタグにwidthとheightのサイズを指定して、imgタグはその枠いっぱいに表示されるようにwidthとheightどちらも100%で指定しています。すると、このように画像がサイズに合わせて伸びてしまう・・・。
See the Pen Untitled by Arisa Hara (@Arisa-Hara) on CodePen.
object-fitを使用して解決
object-fit: cover; の1行を追加するだけで、
縦横のうち小さい方を基準にして自動的に拡大・縮小され、divタグからはみ出した部分はトリミングされます。
See the Pen Untitled by Arisa Hara (@Arisa-Hara) on CodePen.
まとめ・ポイント
・コードを一つ追加するだけでレスポンシブ対応が可能な便利なコード！
・divタグでimgタグを囲い、divにサイズ指定をする。
imgタグはdivタグいっぱいに表示されるようにwidth:100%; height: 100%; を指定。画像が伸びないように、object-fit: cover; を指定。
・起点を中央でなく右や左に指定したい場合は、object-fit: cover; に追加して、object-position: 横の位置 縦の位置; を追記すると写真をトリミングする位置が変更できる！
・横幅を画面いっぱい、縦幅を固定したいときはdivタグにwidth:100%; height:指定したい値; を指定すればOK。