Flexbox で画像のアスペクト比を維持するにはどうすればよいですか?

フレックスボックスでの画像のアスペクト比の維持

フレックスボックス レイアウトでは、コンテナの幅を満たすために画像が不釣り合いに伸縮する傾向があります。画像の高さを調整しながらアスペクト比を維持するには、次の解決策を検討してください。

オプション 1: object-fit

画像に object-fit プロパティを追加します。

img {
  object-fit: contain;
}

これにより、画像がサイズ内に収まりながらその寸法が維持されるようになります。 container.

オプション 2: フレックスボックス ルール

イメージで次のフレックスボックス プロパティを使用します:

img {
  align-self: center;
  flex: 0 0 auto;
}

• align-self: center は、コンテナ内で画像を垂直に配置します。
• flex: 0 0 auto は、フレックス軸 (垂直方向) に沿って伸縮した画像。

実際の例:

<div class="slider">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

.slider {
  display: flex;
}

.slider img {
  margin: 0 5px;
}

/* Option 1: object-fit */
.img-contain {
  object-fit: contain;
}

/* Option 2: Flexbox Rules */
.img-flex {
  align-self: center;
  flex: 0 0 auto;
}

以上がFlexbox で画像のアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。