Flexboxで画像が横に引き伸ばされるのを防ぐ方法

CSSのFlexboxを使うと、画像が親要素の幅いっぱいに横方向へ引き伸ばされてしまうことがあります。この記事では、その問題を防ぐシンプルな方法を解説します。

Flexboxには少し変わったデフォルトの挙動があり、画像が親コンテナの全幅に引き伸ばされるケースがあります。例えば、flex-direction: column を指定した親要素（フレックスコンテナ）の中に、子要素（フレックスアイテム）として画像を配置した場合、画像の自然な高さは維持される一方で、幅だけが親コンテナの幅いっぱいに広がってしまいます。

この挙動は、ブラウザごとのデフォルトスタイルシート（ユーザーエージェントスタイルシート）によって異なるため、環境によって見え方が変わる点にも注意が必要です。

幸い、解決方法はとてもシンプルです。画像（フレックスアイテム）の align-self プロパティの初期値である stretch を、別の値に変更するだけでOKです。

stretch の代わりに center を指定すると、画像の横伸びが解消され、さらに画像が親コンテナの中央に縦方向で配置されます。

img {
    align-self: center;
}

実装例

以下のCSSサンプルでは、親要素（フレックスコンテナ）を1つ用意し、その中に子要素（フレックスアイテム）として画像を2つ配置しています。

• 1つ目の画像にはブラウザデフォルトの align-self: stretch が適用されており、アスペクト比が崩れてしまっています。
• 2つ目の画像には .self-center というユーティリティクラスを追加し、align-self: center を指定することで、引き伸ばしを防いでいます。

https://codepen.io/StrengthandFreedom/pen/qBBoMOX

これで問題解決です！

補足：top を使うと、画像を親コンテナの上端に揃えることもできます。

img {
    align-self: top;
}

どちらの方法でも画像から stretch の値を取り除くことはできますが、top と center のどちらを選ぶかは、画像をどのように表示したいかによって決めるとよいでしょう。

覚えておくと便利なポイント

フレックスアイテムの align-self の初期値は stretch です。つまり、子要素が画像であっても他のHTML要素であっても、デフォルトでは横方向に引き伸ばされるということです。意図しないレイアウト崩れを防ぐためにも、この仕様は覚えておきましょう。