Flexbox レイアウトで Object-Fit: Contain が元の画像の幅を維持するのはなぜですか?

オブジェクトフィット: 含む;レイアウトでの元の画像の幅の維持

フレックスボックス コンテナー内でレスポンシブな画像を維持するには、多くの場合、object-fit: contains を使用します。画像のサイズを変更すると問題は解決しますが、基礎となるレイアウトでは元の画像の幅が維持され、水平スクロールが発生する可能性があります。この動作は、object-fit: contains の予想される結果です。

この動作を理解するには、より簡単な例を考えてみましょう。

<code class="css">.box {
  width: 300px;
  height: 300px;
  border: 1px solid;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}</code>

<code class="html"><div class="box">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Flexbox レイアウトで Object-Fit: Contain が元の画像の幅を維持するのはなぜですか?" >
</div></code>

このシナリオでは、画像の寸法がボックスよりも大きい場合、画像はボックス内に完全に収まるように縮小されます。ただし、画像のアスペクト比は維持され、元の幅が維持される可能性があります。

この原則をフレックスボックス レイアウトに適用すると、実際に画像はコンテナ内に収まるようにサイズ変更されます。ただし、コンテナ自体は元の画像の幅に合わせて伸縮します。これを防ぐには、コンテナの最大幅を設定するか、画像の応答性を維持するための代替アプローチを検討することを検討してください。

以上がFlexbox レイアウトで Object-Fit: Contain が元の画像の幅を維持するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。