Flexboxで画像のストレッチを防ぐ方法

CSSのFlexboxが画像を水平方向に引き伸ばさないようにする方法を学びます。

Flexboxには、画像が親コンテナの全幅に水平方向に引き伸ばされるという奇妙なデフォルトの動作があります。したがって、flex-direction: columnを持つ親要素（フレックスコンテナ）がある場合 そして、画像である子要素（フレックスアイテム）、そして画像の自然な高さ 幅が親コンテナと同じ幅に引き伸ばされている間、維持されます。

ブラウザのデフォルトのCSSスタイルシート（ユーザーエージェントスタイルシート）によっては、この動作に一貫性がありません。

幸いなことに、解決策は簡単です。画像/フレックスアイテムのalign-selfを置き換えるだけです プロパティのデフォルトのstretch 別の値を持つ値。

stretchの代わりに centerを使用できます 、これにより、画像のストレッチが削除され、画像が親コンテナの中央に垂直に配置されます。

img {
    align-self: center;
}

例

次のCSSの例を確認してください。ここでは、1つの親（フレックスコンテナ）と2つの子の画像要素（フレックスアイテム）が内部にあります。

• 最初の画像要素には、ブラウザのデフォルトのalign-self: stretchがあります これはアスペクト比を台無しにします。
• 2番目の画像要素に、.self-centerというユーティリティクラスを追加しました。 、align-self: centerを使用 ストレッチを削除する宣言：

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

栄光、問題は解決しました！

注：topを使用することもできます 、画像を親コンテナの上部に垂直に配置します。

img {
    align-self: top; 
}

どちらの方法でも画像からストレッチ値が削除されますが、topを使用する必要があるかどうか またはcenter 画像で何をしたいかによります。

知っておきたい

Flexアイテムにはデフォルトのalign-selfがあります stretchの値 。したがって、flex-item（子要素）が画像であろうと別のHTML要素であろうと、デフォルトでは水平方向に引き伸ばされます。