object-fit: Contain in Flexbox Containers でスクロールバーを防ぐ方法

CSS Object-Fit: Contain はレイアウト内の画像の寸法を維持します

問題:

の場合object-fit: contains を使用してフレックスボックス コンテナ内の画像のサイズを変更すると、画像は応答して調整されますが、元の画像の幅は維持されるため、スクロールバーが表示されます。

探索:

object-fit は、コンテナーのサイズが画像自体とは異なる場合に、画像がどのように動作するかを定義します。 object-fit: contain は、アスペクト比を維持しながら、画像が切り取られることなくコンテナ内に収まるようにします。

CSS 属性が欠落しています:

この問題を解決するには、追加のコンテナの幅と高さを指定するには CSS 属性が必要です。

解決策:

画像の元の幅に依存する代わりに、width を使用してコンテナの幅を明示的に設定します。 。さらに、高さを使用して画像のアスペクト比に一致するコンテナの高さを指定します。

更新された CSS コード:

<code class="css">.half-containers {
  flex: 0 1 50%;
  width: 50%;  /* Specify explicit width for the container */
  height: calc(50% / aspect-ratio);  /* Calculate height based on aspect ratio */
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}</code>

概念の説明:

コンテナの幅と高さを明示的に定義することで、アスペクト比を維持しながら、定義された寸法内で画像を拡大縮小できるようになります。計算された高さにより、元の幅がコンテナの幅を超えている場合でも、画像が歪むことなくコンテナ内に収まるようになります。

以上がobject-fit: Contain in Flexbox Containers でスクロールバーを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。