ホームページ > ウェブフロントエンド > CSSチュートリアル > 私の「object-fit」が Flexbox で機能しないのはなぜですか?

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

Barbara Streisand
リリース: 2024-12-10 03:56:12
オリジナル
884 人が閲覧しました

Why Isn't My `object-fit` Working in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート