ごきげんよう。
綾崎です。

今回は、「レスポンシブでサムネイル画像のアスペクト比（縦横比）を固定して表示する方法」に関しての記事です。

ご紹介するのは、下記の２つのやり方です。

• 画像をバックグラウンドで設定する
• 画像をimgタグで設定する

私自身がこの設定がすごく苦手で、毎回のように調べているので、まとめようと思いました。

同じような方の役に立てば幸いです。

画像をバックグラウンドで設定する

background-imageで画像を設定し、スタイルを当てる方法です。

HTML

<div class="img-wrap">
  <div class="img-space"></div>
</div>

CSS

  .img-wrap {
  width: 100%;
  height: auto;
}
.img-space {
  width: 100%;
  height: 0;
  padding-top: 50%;
  background: url('ファイルパス') no-repeat center;
  background-size: cover;
}

.img-wrapのpadding-topの値が、横幅に対しての高さの％です。

画像の高さ ÷ 画像の横幅 × 100 = x%

で求められます。

見え方

上記の形でスタイルを当てたのが、下記になります。

また、background-sizeをcontainにすると、このようになります。

画像をimgタグで設定する

imgタグにobject-fitで設定する方法です。

注意点として、object-fitはIEは未対応です。
IEの対応が必要な場合は、jsを利用した対処方法などがあるようなので、「object-fit IE対応」などで調べてみてください。

HTML

<div class="img-wrap">
	<img src="ファイルパス" />
</div>

CSS

.img-wrap {
  width: auto;
  padding-top: 50%;
  position: relative;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}

先ほどと同じで、.img-wrapのpadding-topの値が、横幅に対しての高さの％です。

画像の高さ ÷ 画像の横幅 × 100 = x%

で求められます。

見え方

imgタグで画像を設定し、スタイルを当てるとこのようになります。

さいごに

以上、レスポンシブでサムネイル画像のアスペクト比（縦横比）を固定して表示する方法でした。

IEの対応や、動的に出力する画像の都合などなどあると思うので、そのサイトにあった形でスタイルを設定してください。

見え方の画像は、実際にスタイル当たっているので、ウィンドウ幅を変えてみたり、インスペクタ当ててみたりしてみてくださいね。

それでは。

おまけ

もしお時間あれば、イラストを見ていってくれると嬉しいです。