応用60. 背景画像のサイズ変更のプロパティ（background-size）

contain

要素の幅、高さの小さいサイズを基準に背景画像が収まるように縦横比率を固定して変形します。
結果、余白が出る場合があります。

<div class="box"></div>

.box{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  background-image: url(../image/coffee.jpg);
  background-size: contain;
}

cover

要素の幅、高さの大きいサイズを基準に、背景画像が収まるように、縦横比率を固定して変形します。
結果、背景画像がはみ出して収まらない場合があります。

.box{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  background-image: url(../image/coffee.jpg);
  background-size: cover;
}

指定できるサイズの値（手動）

任意の幅、高さでサイズ指定もできます。
その場合は幅、高さのどちらかにautoを指定しておくと比率を自動調整してくれます。
指定は、幅、高さの順に指定し、半角スペースで区切ります。
単位は、主にpx, %で指定します。

.box{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  background-image: url(../image/coffee.jpg);
  /* 幅100px、高さ自動 */
  background-size: 100px auto;
}

幅、高さどちらもサイズ指定した場合は、背景画像を自由に引き延ばすこともできます。

.box{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  background-image: url(../image/coffee.jpg);
  /* 幅100px、高さ150px */
  background-size: 80px 150px;
}