【Flexbox】横並びデザインの画像の高さを揃える方法

Flexboxとは？

決められた範囲内で、要素の並び方などを自由に行うことができ、CSSの記述も比較的シンプルに
行うことが出来るのが特徴でFlexコンテナ（親要素）とFlexアイテム（子要素）で構成されます。
文章だと少しイメージがわきづらいと思いますので、一例を実際に記載してみます。

通常のFlexboxの記述で見た画像の見え方

コンテンツ1

リンクサンプル

コンテンツ2

リンクサンプル

画像の高さが異なる場合 、何にも考えずに普通に設定すると、上のように高さがバラバラになってしまいます。

なんじゃこりゃー！ださすぎ。

これだと、見栄えが悪すぎます。 だからといっていちいちソフトを起動して画像の高さを揃えるのも面倒！というのも正直なところです。
そんなときは、Flexboxの子要素（画像部分）を css で指示すると高さが揃います。

Flexboxの画像の高さを揃えた場合の見え方

コンテンツ1

リンクサンプル

コンテンツ2
サンプル

リンクサンプル

コンテンツ1の画像が縦長で不格好でしたが、拡大されて画像の高さが揃いました！もちろんレスポンシブですので、ウィンドウサイズが変わっても問題ありません。ただ、「画像が切れる」という欠点があるので、出来るだけ縦横比が近い画像を使用したほうが良いです。

では、実際の設定HTMLとCSSを記載していきます。

Flexboxで画像の高さを揃えるためのHTMLとCSS

今回紹介するFlexboxで画像の高さを揃えるための方法は2つです。
HTMLは共通です。

HTMLはこちら

<div class="flexbox-parent">
　<div class="flexbox-child">
　　<div class="flexbox-child-img">
　　　<img src="img/flex/box-child4.png" alt="サンプル画像">
　　</div>
　　<div class="flexbox-child-text">
　　　コンテンツ1
　　</div>
　　<a href="#">リンクサンプル</a>
　</div>
　<div class="flexbox-child">
　　<div class="flexbox-child-img">
　　　<img src="img/flex/box-child3.png" alt="サンプル画像2">
　　</div>
　　<div class="flexbox-child-text">
　　　コンテンツ2<br>コンテンツ2
　　</div>
　　<a href="#">リンクサンプル2</a>
　</div>
</div>

Flexboxで画像の高さを揃えるためのCSS/画像の高さを固定

画像の高さをCSSで指定して揃えます。CSSの記述が短いのはこちらです。
<img>に高さを指定して、 object-fit:cover; で指定した高さいっぱいに表示します。
※object-fit:cover; はbackgroud-sizeと似たような感じです。
こちらはウィンドウの高さが変わっても画像の高さは変わりません。

.flexbox-parent {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
}
.flexbox-child {
  width:49%;
  height:auto;
  display:flex;
  flex-direction:column;
}
.flexbox-child-img {
  width:100%;
  height:auto;
  position:relative;
}
.flexbox-child-img img {
  display:block;
  width:100%;height:180px;
  object-fit:cover;
  object-position:center;
  background:#eee;
}
.flexbox-child-text {
  flex:1;
}
.flexbox-child a {
  width:100%;
  height:50px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#ccc;
  color:#fff;
  font-weight:bold;
}

Flexboxで画像の高さを揃えるためのCSS/疑似要素を使用 ★おすすめ

画像の縦横比（アスペクト比）を固定して画像の高さを揃えます。
<img>タグの親要素の疑似要素にpadding-topで余白を指定し、<img>はposition:absolute;で固定します。疑似要素の高さは0に指定するのを忘れずに！
こちらはウィンドウの高さが変わるとpadding-topで高さを出しているので画像の高さも変わります。

.flexbox-parent {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
}
.flexbox-child {
  width:49%;
  height:auto;
  display:flex;
  flex-direction:column;
}
.flexbox-child-img {
  width:100%;
  height:auto;
  position:relative;
}
.flexbox-child-img::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:60%;
}
.flexbox-child-img img {
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  background:#eee;
}
.flexbox-child-text {
  flex:1;
}
.flexbox-child a {
  width:100%;
  height:50px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#ccc;
  color:#fff;
  font-weight:bold;
}

まとめ

今回紹介した flexbox横並びデザインの画像の高さを揃える方法をまとめると次のようになります。

1. 画像の高さ自体を固定する
2. 親要素の疑似要素にpadding-topで余白を指定して画像の縦横比を揃える

ホームページ制作の際には、flexboxの横並びを使用することが多い思いますので、お役に立てれば幸いです。