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ブラウザは非対応なのでご注意ください。
IＥブラウザに対応させたい方は以下記事をご覧ください。
https://kasumiblog.org/object-fit-ie/
以上で解説を終わります。
目次
