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

CSSで画像を枠内に収めるにはCSSのobject-fitプロパティを用います。ではCSSで画像を枠内に収める方法をサンプルコード付き解説します。

コンテンツ [表示]

  1. 1CSSで画像を枠内に収めたい
  2. 2CSSで画像を枠内に収める方法
  3. 2.1余白を持たせて画像を枠内に収める方法
  4. 2.2画像を枠内にぴったり収める方法
  5. 3まとめ

CSSで画像を枠内に収めたい

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

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

Photo byFirmbee

CSSで画像を枠内に収める方法

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

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

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

あわせて読みたい
object-fit
CSSのobject-fitプロパティはボックスの中の画像や動画をどのようにサイズ調整してはめ込むか制御するプロパティです。object-fitプロパティの構文や使い方をサンプルコード付きで解説します。

余白を持たせて画像を枠内に収める方法

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

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

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

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

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

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

あわせて読みたい
object-position
CSSのobject-positionプロパティはボックス内の画像や動画などの表示位置を制御するプロパティです。object-positionプロパティの構文や使い方についてサンプルコード付きで解説します。

画像を枠内にぴったり収める方法

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

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

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

まとめ

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

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

GeekHive採用サイト

関連記事