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

Flexbox で Object-Fit が機能しない: 理由と解決策

Object-fit は、画像のサイズ変更方法を制御する CSS プロパティですコンテナに合わせて。ただし、フレックスボックス レイアウトでは、object-fit が期待どおりに機能していないように見える場合があります。

その理由は、object-fit がコンテナではなく、置換された要素自体に対して動作するためです。この場合、画像はラッパー div ではなく、置換された要素です。

フレックスボックスでオブジェクトフィットを意図どおりに機能させるには、画像がフレックス項目になる必要があります。そうすることで、画像自体に flex プロパティを設定し、object-fit が正しく適用されるようにします。

変更されたコードは次のとおりです。

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

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

この更新されたコードでは、画像は flex アイテムであり、object-fit はそれらに直接適用されます。これで、アスペクト比を維持しながらコンテナ全体をカバーするように画像のサイズが変更されます。

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