Flexbox コンテナ内の画像に対して「object-fit」が正しく機能しないのはなぜですか?

Flexbox で object-fit が機能しないのはなぜですか?

Flexbox 列内の画像に object-fit: cover プロパティを適用しようとすると、ユーザーは画像のサイズが期待どおりに変更されない問題。その説明は、object-fit プロパティの仕様にあります。

CSS 仕様によると、object-fit は、使用される高さと幅によって確立されるボックス内での置換された要素の内容の適合を決定します。画像の場合、置換される要素はコンテナではなく画像自体です。したがって、object-fit プロパティは、フレックス項目の寸法ではなく、画像自体の高さと幅に適用されます。

解決策:

この問題を解決するには、画像自体がフレックスアイテムになるようにフレックスボックスを設定します。これにより、object-fit プロパティを画像に効果的に適用できるようになり、目的のサイズ変更動作が実現します。

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

画像をフレックス項目にすることで、object-fit プロパティが適切に実行できるようになりました。割り当てられたフレックス コンテナ スペース内に画像を収めることで、目的の表紙サイズ設定動作が得られます。

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