flexboxで画像を横並びにするとき、画像が縦に伸びることがある
この場合は元の縦横比のまま
横要素のheightが画像より長くなると、それに合わせて画像の縦幅が伸びる
原因は align-items の指定
align-items は要素の垂直方向の位置を指定するプロパティ。
align-items を指定していなくても、
デフォルトでは stretch になっているため、横要素の縦幅に合わせて画像が伸びてしまうことがある。
- stretch（デフォルト）
- アイテムを上下の余白を埋めるように配置
- flex-start
- アイテムを上揃えで配置
- flex-end
- アイテムを下揃えで配置
- center
- アイテムを上下中央揃えで配置
- baseline
- アイテムをベースラインに合わせて配置
flexbox 内に画像を入れる時は align-items を stretch 以外に指定する