CSS フレックスボックスで画像のアスペクト比を維持しながら高さを柔軟にするにはどうすればよいですか?

高さを柔軟にして画像の縦横比を維持する

CSS フレックス ボックス モデルでは、コンテナの幅を満たすために画像が伸縮することがよくあります。 。高さを調整するときにアスペクト比を維持するのは難しい場合があります。この問題に対処するために、効果的な解決策を検討してみましょう。

1 つの解決策は、画像要素のオブジェクト フィットを利用することです。

object-fit: contain;

このプロパティは、指定されたスペース内に画像を含めるようブラウザに指示します。プロポーションを保ちながら。 http://jsfiddle.net/ykw3sfjd/ で実際の例を参照できます。

または、特定の flex プロパティを使用することもできます。

align-self: center;
flex: 0 0 auto;

align-self により、画像が垂直になるようにします。親要素内の中央に配置され、flex: 0 0 auto は画像の成長動作を制御します。これにより、画像が利用可能な高さいっぱいに伸びるのを防ぎ、アスペクト比を維持できるようになります。

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