CSS Object-Fit で画像のオーバーフローと歪みを修正する方法

CSS Object-Fit: レスポンシブ レイアウトで画像のアスペクト比を維持する

CSS の object-fit を利用する場合: 画像の応答性を確保するためのプロパティを含めるフレックスボックス コンテナ内では、レイアウトが元の画像の幅を保持し、不要なスクロールバーが表示されるという問題が発生する可能性があります。

Object-Fit について

問題を詳しく調べる前にそれでは、object-fit がどのように動作するかを説明しましょう。このプロパティは、要素のコンテンツをその境界ボックス内でどのように拡大縮小して配置するかを定義します。含むように設定すると、コンテンツ (この場合は画像) は縦横比を維持しながら比例してサイズ変更され、使用可能なスペース内に収まります。

元の画像の幅の問題

提供されたコード スニペットでは、overflow: auto を使用してコンテナーを定義しています。これにより、コンテンツがコンテナーの幅を超えるとスクロールバーが導入されます。ただし、画像の幅は元のサイズのままであるため、レイアウトは画像の初期サイズに合わせて調整されます。

解決策

これを修正するには、 CSS の width プロパティを使用して画像の幅を指定します。これにより、画像の幅がコンテナの幅に一致するようになり、object-fit プロパティでアスペクト比を維持しながら画像を正しく拡大縮小および配置できるようになります。

更新されたコード

これは、width プロパティを含む CSS コードの更新バージョンです:

<code class="css">img {
  object-fit: contain;
  width: 100%;
}</code>

width: 100% ルールを追加することで、画像の幅をコンテナに正確に合わせるようにブラウザに指示します。 object-fit: contains プロパティが意図したとおりに機能するようにします。

以上がCSS Object-Fit で画像のオーバーフローと歪みを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。