Flexbox 列の画像に対して Object-Fit が機能しないのはなぜですか?

フレックスボックスでオブジェクトフィットが機能しない: 原因を明らかにする

フレックスボックスを使用して画像を含む同じサイズの列を作成し、オブジェクトを適用する場合これらの画像に Fit プロパティを適用することは、目的の「カバー」サイズを実現するために論理的であると思われるかもしれません。ただし、この手法では期待した結果が得られないことがよくあります。

仕様によれば、object-fit プロパティは、置換された要素 (この場合は画像) の内容が定義されたボックス内でどのように調整されるかを制御します。使用されている高さと幅によって決まります。これは、コンテナではなく、画像自体がサイズ変更の対象であることを意味します。

このプロパティを有効にするには、フレックスボックスの設定を再構築する必要があります。コンテナ div 内で画像をラップする代わりに、画像自体をフレックス アイテムに変換します。これにより、オブジェクト フィット プロパティが個々の画像に適用され、目的の「カバー」効果が得られます。

以上がFlexbox 列の画像に対して Object-Fit が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。