ここでは、flexboxを使って画像を横に並べたら画像をはみ出てしまったり、画像の幅を調整したら縦横の比率が調整されずに伸びてしまった場合の対処法について見ていきます。

今回は、下記のトマトとレモンの２枚の画像を使いたいと思います。

とりあえず画像を入れてみただけの場合

はじめに下記をご覧ください。

ボタンで表示を切り替えてご覧ください。

See the Pen flexbox_img01 by kenichi (@ken81) on CodePen.

画像を横に並べているのですが、真っ白で何も見えません・笑

HTML

<div class="container">
  <img src="https://cotodama.co/wp-content/uploads/2018/06/flexbox_img01.jpg">
  <img src="https://cotodama.co/wp-content/uploads/2018/06/flexbox_img02.jpg">
</div>

CSS

.container{
  width: 600px;
  margin: 0 auto;
  display: flex;
}

これは単純にflexアイテムとして画像を２枚入れただけの状態です。親要素の横幅を600pxに指定しているにも関わらず、画像サイズを指定していないため原寸表示されてしまい、見た目は何なのか分かりません。つまり、そのまま画像を入れるだけだと画像がはみ出てしまうのです。

画像の横幅をそろえてみた場合

See the Pen flexbox_img02 by kenichi (@ken81) on CodePen.

CSS

.container{
  width: 600px;
  margin: 0 auto;
  display: flex;
}
.container img{
  width: 50%;
}

今度は、画像にwidth:50%;を指定してみました。横幅は良くなりましたが高さがそのまま（？）になっているため画像がタテに伸びしてしまっています。このような場合の対処法は次の通りです。

対処法１：align-items: flex-start;を指定する

１つ目の対処法は、align-items: flex-start;を指定することです。

See the Pen flexbox_img03 by kenichi (@ken81) on CodePen.

CSS

.container{
  width: 600px;
  display: flex;
  align-items: flex-start;
}
.container img{
  width: 50%;
}

align-itemsの初期値は、stretch、つまり、「flexコンテナの高さいっぱいにflexアイテムを広げる」設定になっています。このため、flexアイテムとなった画像たちはみんなタテに広がってしまうのです。そこで、align-items: flex-start;を指定し、「要素を上にそろえて配置する」ことで画像が伸びるのを防ぎます。

画像の縦横比率を整える方法はもう一つあります。

対処法２：align-self: flex-start;を指定する

先ほどは、flexコンテナ（つまり、親要素）がセレクタとなっていましたが、今度は、flexアイテム（つまり、子要素）であるimg要素をセレクタにしてalign-self: flex-start;を指定します。

See the Pen flexbox_img04 by kenichi (@ken81) on CodePen.

CSS

.container{
  width: 600px;
  margin: 0 auto;
  display: flex;
}
.container img{
  width: 50%;
  align-self: flex-start;
}

これでも同じ結果になりました。親要素をセレクタにしてflex-startを指定するか、子要素に対して個別にflex-startを指定するの違いですね。

以上がflexboxで並べた画像がはみ出たり伸びたりしてしまうときの対処法でした。