「object-fit」がフレックスボックス列の画像で機能しないのはなぜですか?

フレックスボックスで「オブジェクトフィット」が機能しない理由を理解する

この調査の目的は、「オブジェクト」を利用することです。 -fit: cover" プロパティを使用して、フレックスボックス列内の画像を拡大縮小します。ただし、画像が調整されていないことが観察されています。この記事では、基礎的な仕組みを明確にし、解決策を提供します。

「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="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="「object-fit」がフレックスボックス列の画像で機能しないのはなぜですか?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="「object-fit」がフレックスボックス列の画像で機能しないのはなぜですか?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="「object-fit」がフレックスボックス列の画像で機能しないのはなぜですか?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="「object-fit」がフレックスボックス列の画像で機能しないのはなぜですか?" >
</div>

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