Written by Kasumi

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

こんにちはカスミです。

さて、以下のようなお悩みをお持ちでしょうか?

記事一覧ページ等で、サムネイルがでているが、サムネイル画像のサイズがばらばらで崩れてしまう。
heightを指定して、高さを揃えることは出来るが画像の縦横比が崩れて画像が伸びてしまう。。
サムネイル画像の高さを全部一律に揃える方法はないか?

このような悩みを解決致します。

本記事では、CSSの「object-fit」プロパティを使って、サムネイルの高さを一律に揃える方法について解説致します。

実装サンプル

See the Pen オブジェクトフィット by Kohei (@kouk05) on CodePen.dark

まずは実装サンプルをご覧ください。

高さが違う画像を並べていますが、高さが一律で間延びしていないかと思います。

これが「object-fit」を使った例です。

次章より詳細を説明します。

画像にobject-fitを適用する

/*指定した高さ・横幅を保持して、全体が見えるよう画像の縦横比をリサイズし、中央配置にする*/
img {
  display: block;
  width: 100%;/*任意の横幅を指定*/
  height: 200px;/*任意の高さを指定*/
  object-fit: contain;
}

/*画像の縦横比を保持して、指定した高さ・横幅を超える分、リサイズして、トリミングする*/
img {
  display: block;
  width: 100%;/*任意の横幅を指定*/
  height: 200px;/*任意の高さを指定*/
  object-fit: cover;
}

高さを揃えたい画像(imgタグなど)に対し、上記コードを適用しましょう。

これだけで高さを一律にできます。

指定した高さ・横幅を保持して、全体が見えるよう画像の縦横比をリサイズし、中央配置にする場合は
「object-fit: contain;」

画像の縦横比を保持して、指定した高さ・横幅を超える分、リサイズして、トリミングするには
「object-fit: cover;」

状況によって使い分けましょう。以上で解説を終わります。

まとめ

画像高さを揃える方法は色々ありますが、本記事の方法が一番シンプルで使いやすいです。

但し、IEブラウザは非対応なのでご注意ください。

IEブラウザに対応させたい方は以下記事をご覧ください。
https://kasumiblog.org/object-fit-ie/

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】CSSで文字のitalicが効かない。transformで傾きを付けよう

2022.04.10
280
HTMLCSS プログラミング

【簡単】tableタグをスマホでは縦並びにする方法【レスポンシブ】

2022.01.18
3256
HTMLCSS プログラミング

【簡単CSS】横幅100%コンテンツを幅指定された中央寄せコンテンツの起点に合わせて左揃えにする方法

2022.04.08
281
WordPress プログラミング

Advanced Custom Fields Pro(ACFPRO)を使いオプションページを作成する方法

2022.04.22
770