CSSで画像を枠内に収める方法をサンプルコード付き解説！

WEBページを作成しているとborderプロパティなどで装飾したdiv要素の中にimg要素で画像を入れたが、画像が枠からはみ出る場合などCSSで画像を枠内に収めたいというときがあります。

今回はCSSで画像を枠内に収める方法をサンプルコード付きで解説していきます。

CSSで画像を枠内に収めるには、CSSのobject-fitプロパティを用います。

object-fitプロパティが付与された画像はレスポンシブに対応しており、画面幅が変わるとリサイズされます。

また以下の記事でobject-fitプロパティの使い方について解説しているので、参照してください。

余白を持たせて画像を枠内に収めるには、object-fit: contain;を用います。

今回は横長の画像を使用するため、画像が横長になりますが、縦長の画像を使用すると画像が縦長で枠内に収まります。

ではサンプルコードで実際に挙動を確認してみましょう。

このようにdiv要素が持つ枠内に余白を持ちつつ画像が収まっていることが分かります。

ちなみにですが、object-positionプロパティを用いると枠内で画像の配置を変えることができます。

object-positionプロパティの使い方に関しては以下の記事で解説しているので参照してください。

画像を枠内にぴったり収めるには、 object-fit: cover;を用います。

ではサンプルコードで実際の挙動を確認してみましょう。

このようにobject-fit: cover;を用いることで、枠と画像をぴったりあわせることができます。

いかがでしたでしょうか？

枠内に画像を収めたいという場面はよくあるので、ここで紹介した方法を用いてぜひ試してみてください。