CSSを使いBackground imgのアスペクト比を保ちバランス良く画像を画面いっぱいに表示する方法

画像の切り取り部分

①表示画面のアスペクト比が横幅基準で一定になる表示(例:縦横比50%)

横幅100%、高さ50%の範囲を、全体の画像の中央の部分から切り取り表示します。

②横幅が変化しても、高さが一定になる表示(例:高さ250px,ｱｽﾍﾟｸﾄ比変化)

横幅が変わっても、横幅100%、高さ250pxの範囲を、全体の画像の中央の部分から切り取り表示します。

③画像のアスペクト比が一定になる表示(縦横比は元画像の縦横比と同じ)

元画像の比率で、全体の画像をそのまま表示します。

参考：元画像

画像の寸法：横幅1017px　×　高さ1280px

画像提供：by RonaldPlett pixabay

html

<div class="bg-img bk-im-pa img-bg50"></div>

background-imageを表示する領域を<div>タグで確保します。

CSS

.bg-img {
  max-width: 1070px;
  width: 100%;
  margin: 0 auto;
}
.bk-im-pa{
  background-image: url("dog.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.img-bg50 {
  position: relative;
  &::before {
    display: block;
    content: ' ';
    padding-top: 50%;
  }
}

.bg-img

幅最大1070pxで中央配置

.bk-im-pa

背景画像を読み込み、画面の周辺に隙なく画像を表示するとともに中央配置する

.img-bg50　◀ここがポイント

疑似要素(::before)でpadding-top:50%と指定することで幅に対して50%の高さを確保する。この領域に背景画像を表示する。

html

<div class="bg-img bk-im-ca"></div>

background-imageを表示する領域を<div>タグで確保します。

CSS

.bg-img {
  max-width: 1070px;
  width: 100%;
  min-height: 250px;
  margin: 0 auto;

}

.bk-im-ca{
  background-image: url("dog.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-img

幅最大1070px、最小高さ250pxを確保して、中央配置

.bk-im-ca

背景画像を読み込み、画面の周辺に隙なく画像を表示するとともに中央配置する

▶高さ250pxの画面いっぱいに画像が表示される

html

<div class="block im-ca">
  <img src="dog.jpg" alt="">
</div>

<div>タグに

<div>タグ内に、<img で画像を読み込み表示します。

CSS

.block {
  max-width: 1070px;
  width: 100%;
  min-height: 300px;
  margin: 0 auto;
  position: relative;
}
img {
  position: absolute;
  width:100%;
  height:auto;
  top: 0;
}
.im-ca{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.block

幅最大1070px、最小高さ300pxを確保して、中央配置
画像配置の基準位置に指定します

img

画像配置は、.blockの上部を重ねて配置し、重なるように表示します。

.im-ca

画像は、画面の周辺に隙なく画像を表示するとともに中央配置する