「object-fit」が Flexbox コンテナで機能しないのはなぜですか?

Flexbox で object-fit が機能しない理由

Flexbox での 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;
}

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