CSSのオブジェクトフィットを活用した100%の幅で画像を表示する方法

CSSのオブジェクトフィットを使って、画像を100%の幅で表示する方法とまとめました。

CSSのオブジェクトフィットとは

画像をコンテナに合わせて拡大・縮小するためのCSSプロパティであるオブジェクトフィットは、イメージ要素に対して指定することができます。これにより、画像がコンテナの幅に応じて適切に調整され、レスポンシブな表示が可能となります。

オブジェクトフィットの値

オブジェクトフィットには以下の値があります。

• contain: 画像の縦横比を維持しながらコンテナに収まるように拡大・縮小します。
• cover: 画像をコンテナにフィットさせるために、縦横比を維持しながら必要な方向に拡大・縮小します。画像がコンテナからはみ出す場合もあります。
• fill: 画像をコンテナに合わせて拡大・縮小しますが、縦横比を維持しません。画像が歪む場合があります。

 

画像を100%の幅で表示する方法

CSSのオブジェクトフィットを使用して、画像を100%の幅で表示する手順を以下に示します。

HTMLの準備

まず、HTML内で画像を表示するための準備をします。以下のようなコードを使用します。

<div class="image-container">
  <img src="画像のURL" alt="画像の説明">
</div>

 

CSSの適用

次に、CSSを使用してオブジェクトフィットを適用します。以下のスタイルを適用することで、画像を100%の幅で表示することができます。

.image-container {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 

まとめ

CSSのオブジェクトフィットを使って、画像を100%の幅で表示する方法とまとめました。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...