2021/11/17 (更新日:2024/3/4)

background-img 画像を思い通りにレスポンシブで表示する方法。imgも併せて説明します。

Program

image photo by Krzysiek pixabay

background-img や img を思い通りのスタイルにするのに苦労していませんか？

background-img や img のスタイリング方法を実際の画像の変化を確認しながら説明します。CSSと画像の変化を実感して理解できます。

レスポンシブ時に、background-img や img の画像変化をイメージしスタイリングできるようになります。

background-img 背面画像を思い通りにレスポンシブで表示する方法。
img 画像を思い通りにレスポンシブで表示する方法。
まとめ

1. background-img 背面画像を思い通りにレスポンシブで表示する方法。

1-1. background-img 背面画像の表示を設定するプロパティ

(1) Background-size: 背景画像のサイズを指定する

background-sizeの詳細はこちら

:auto;	自動的に算出される。(初期値)
:cover;	縦横比を保持して、ボックスを完全に覆うようにリサイズされます。画像の周りに空白はありません。幅と高さの短い方を基準にしてリサイズし、ボックスからはみ出した部分は切り取られます。
:contain;	縦横比を保持して、ボックスに全画面が完全に収まるようにリサイズされます。画像の周りに空白ができます。幅と高さの長い方を基準にリサイズし、画像全体をボックスに表示させます。
:数値px_数値px;	背景画像の幅・高さを絶対値で指定する。幅もしくは高さを「auto」で指定することもできる。 auto=指定した値は保持して、縦横比は元の比率を保持して自動で表示する。
:数値%_数値%;	背景領域に対する背景画像の幅・高さの％を指定する。幅もしくは高さを「auto」で指定することもできる。

(2) その他のプロパティ

(2.1) background-repeat: 背景画像をどのように繰り返すかを設定します

:repeat;	描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。収まりきらない場合は切り取られます。
:no-repeat;	画像は繰り返し描画されません
:space;	画像の周りに空白を持ちつつ繰り返し表示されます。
:round;	画像の大きさを調整しながら繰り返し表示されます。

(2.2) background-position: 背景画像の位置を指定します。

:center;	画像を中央揃えにします。同様に、top,left,bottom,right のように指定ができます。
:値%_値%;	画像のオフセット量をパーセントで指定します。

(2.3) background-image: cssで画像の読み込みをします。

:url(画像の指定);

読み込む背景画像の位置を指定します。

1-2. background-img 背面画像の実際の変化

初期設定を基準によく使う４つの設定例を示します。

background-size:auto;	初期設定
background-size:auto 70%;	縦幅は指定して、横幅は比率保持し自動
background-size:70% auto;	横幅は指定して、縦幅は比率保持し自動
background-size:contain;	縦横比を保持して、表示領域に収める
background-size:cover;	縦横比を保持して、表示領域全体を覆う

See the Pen background-img-responsive by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊CodePen上欄のResultを下欄の「1x」「0.5x」「0.25x」で倍率を変えて確認ください。
　html内のdamyの文章はボックスの縦横比を変える目的ですので無視ください。

2. img 画像を思い通りにレスポンシブで表示する方法。

2-1. img 画像の表示を設定するプロパティ

(1) object-fit: img画像のサイズを指定する

object-fitの詳細はこちら

:none;	リサイズせず、そのまま表示します。
:cover;	縦横比を保持して、ボックスを完全に覆うようにリサイズされます。画像の周りに空白はありません。幅と高さの短い方を基準にしてリサイズし、ボックスからはみ出した部分は切り取られます。
:contain;	縦横比を保持して、ボックスに全画面が完全に収まるようにリサイズされます。画像の周りに空白ができます。幅と高さの長い方を基準にリサイズし、画像全体をボックスに表示させます。
:fill;	ボックス内を満たすように、縦横比を変えながらリサイズされます。無理な表示で画像が歪むことがあります。
:scale-down;	noneとcontainのうち、小さい方のサイズに合わせて表示します。

(2) その他のプロパティ

(2.1) object-position: 画像の位置を指定します。

:center_center;	画像を中央に揃えます。同様に、top,left,bottom,right のように指定ができます。
:値%_値%;	画像の横軸縦軸のオフセット量をパーセントで指定します。

2-2. img 画像の実際の変化

noneを基準に初期状態としてよく使う４つの設定例を示します。

初期状態[:none;] + [:cover;] [:contain;] [:fill;] [:scale-down;]について、設定例を示します。

See the Pen img-responsive by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊CodePen 上欄のResultを下欄の 「1x」「0.5x」「0.25x」で倍率を変えて確認ください。
　html内のdamyの文章はボックスの縦横比を変える目的ですので無視ください。

3. まとめ

background-img , imgのスタイリング方法を説明しました。
両方ともプロパティの表現は異なりますが、同様な機能を持っています。
重要な画像はimg補助的な画像はbackground-img を使う、という人もいます。
しかし、自分なりの判断で使い分ければ良いでしょう。

少しでもWebsite作成の参考になればと説明してきました。
皆様が活用していってくださることを切に望みます。

＊最後まで読んでいただきありがとうございます。
　舌足らずで説明不足の所はお許しください。
　また、改良項目・修正項目がございましたらご指摘いただけたら幸いです。