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

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

指定された問題で説明されているように、画像が CSS フレックス ボックス コンテナー内に配置されると、画像はコンテナの幅に合わせて伸縮する傾向があります。ただし、特定のシナリオでは、画像の元のアスペクト比を維持することが望ましい場合があります。

フレックス ボックスを使用してこれを実現するには、2 つの解決策が考えられます:

1。 「object-fit」プロパティの使用:

「object-fit」プロパティを画像に適用すると、アスペクト比を維持しながら親コンテナ内に画像を制限できます。 「object-fit」を「contain」に設定すると、画像の比率を崩すことなく、利用可能なスペースに収まるようにサイズが変更されます。

2.フレックス固有のルールの使用:

もう 1 つのアプローチでは、フレックス固有のルールを利用して目的の効果を実現します。

• 'align-self: center;': 画像が切り取られるのを防ぐために、コンテナ内で画像を垂直方向に配置します。 off.
• 'flex: 0 0 auto;': 画像の初期サイズをゼロに設定し、アスペクト比を維持しながら利用可能なスペースに応じて画像を柔軟にできるようにします。

これらの技術を適用すると、フレックス ボックス コンテナ内の画像のアスペクト比を強制的に維持することができ、利用可能なコンテナに関係なく、その比率が維持されるようになります。スペース。

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