CSS「object-fit: contains」を使用するときに元の画像の幅を維持する方法は?

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

CSS の object-fit: contains プロパティを使用してフレックスボックス コンテナ内の画像のサイズを変更すると、レイアウトでは元の画像の幅が維持されたまま、画像自体が適切に拡大縮小されることがあります。これにより、水平スクロールバーが表示されることがあります。

これが発生する理由を理解するには、object-fit がどのように動作するかを理解することが重要です。より単純な例を見てみましょう:

<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="https://picsum.photos/300/200?image=1069">
</div></code>

このシナリオでは、img 要素は、アスペクト比を維持しながら .box コンテナー内に完全に収まるように指示されます。ただし、コンテナの幅は固定されているため、画像自体には展開するのに十分なスペースがない可能性があります。

ここで object-fit: contains が役に立ちます。コンテナーの幅と高さの制約内に収まるように画像を縮小します。ただし、img 要素の元の幅は変わりません。これは、img 要素の幅と高さのプロパティは、基になる画像の実際のサイズではなく、画像の表示サイズにのみ影響するためです。

元のコードの問題を解決するには、次のことを検討してください。

• img 要素で width: 100% と height: auto を使用し、元のアスペクト比に従って自然に拡大縮小できるようにします。
• コンテナ要素に overflow: hidden を追加して、これを防ぎます水平スクロールバーが表示されなくなります。

以上がCSS「object-fit: contains」を使用するときに元の画像の幅を維持する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。