CSSで画像を枠内に収める方法をサンプルコード付き解説!
CSSで画像を枠内に収めるにはCSSのobject-fitプロパティを用います。ではCSSで画像を枠内に収める方法をサンプルコード付き解説します。
CSSで画像を枠内に収めたい
WEBページを作成しているとborder
プロパティなどで装飾したdiv要素の中にimg
要素で画像を入れたが、画像が枠からはみ出る場合などCSSで画像を枠内に収めたいというときがあります。
今回はCSSで画像を枠内に収める方法をサンプルコード付きで解説していきます。
CSSで画像を枠内に収める方法
CSSで画像を枠内に収めるには、CSSのobject-fit
プロパティを用います。
object-fit
プロパティが付与された画像はレスポンシブに対応しており、画面幅が変わるとリサイズされます。
また以下の記事でobject-fit
プロパティの使い方について解説しているので、参照してください。
余白を持たせて画像を枠内に収める方法
余白を持たせて画像を枠内に収めるには、object-fit: contain;
を用います。
今回は横長の画像を使用するため、画像が横長になりますが、縦長の画像を使用すると画像が縦長で枠内に収まります。
ではサンプルコードで実際に挙動を確認してみましょう。
このようにdiv
要素が持つ枠内に余白を持ちつつ画像が収まっていることが分かります。
ちなみにですが、object-position
プロパティを用いると枠内で画像の配置を変えることができます。
object-position
プロパティの使い方に関しては以下の記事で解説しているので参照してください。
画像を枠内にぴったり収める方法
画像を枠内にぴったり収めるには、 object-fit: cover;
を用います。
ではサンプルコードで実際の挙動を確認してみましょう。
このようにobject-fit: cover;
を用いることで、枠と画像をぴったりあわせることができます。
まとめ
いかがでしたでしょうか?
枠内に画像を収めたいという場面はよくあるので、ここで紹介した方法を用いてぜひ試してみてください。
