flexboxで画像が縦に伸びる問題

flexboxで画像が縦に伸びた時の対処法

flexboxで作成した際、画像が縦に伸びる問題が発生しました。

Chrome、IE、Edge、iphoneのsafariで見たときは気づきませんでしたが、パソコンのsafariで見ると明らかに縦に伸びています。

cssに記述を追加します。二種類ありますのでどちらかの方法を試してみてください。

親要素のみに記述する方法

親要素

height: auto;
align-items: flex-start;

実際にコードを書くとこんなかんじになります↓

HTML

<div class="content">
 　<img src="yasai.jpg" alt="野菜とフルーツの画像">
  .
  .
  .
<div>

CSS

.content{
  display: flex;
  height: auto;
  align-items: flex-start;
}

親要素と子要素にそれぞれ記述する方法

1. 親要素

height: auto;

2.子要素

align-self: flex-start; 

実際にコードを書くとこんなかんじになります↓

HTML

<div class="content">
 　<img src="yasai.jpg" alt="野菜とフルーツの画像">
  .
  .
  .
<div>

CSS

.content{
  display: flex;
  height: auto;
}

.content img{
  align-self: flex-start;
}

これで画像がきれいに表示されました。

iphoneで確認したから大丈夫と油断してましたが、すべてのブラウザでのチェックは必要ですね。