切り抜きや配置の問題を発生させずに、レスポンシブにスケール変更された CSS 背景画像を作成するにはどうすればよいですか?

プロポーショナル スケーリングを備えたレスポンシブ CSS 背景画像

CSS の背景画像は、特にさまざまな画面サイズに合わせてレスポンシブに拡大縮小したい場合に、扱いにくいことがよくあります。正しいアスペクト比を維持します。背景サイズ プロパティを使用してこの効果を実現する方法を見てみましょう。

問題: トリミングと配置の問題

background: url() で背景画像を指定すると、次の問題が発生する可能性があります。トリミングと位置合わせ。 Firefox は高さのスケーリングを優先するため、垂直方向のトリミングが発生する可能性がありますが、Chrome では画像を繰り返す代わりに中央に配置する場合があります。

解決策:background-size: cover

これらの問題を解決するには、カバーと組み合わせたbackground-sizeプロパティvalue:

body {
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

互換性:
ここでbackground-sizeプロパティの互換性を確認してください: [CSS トリック](https://css-tricks.com/css3- background-size/)

contain と cover の説明

cover 値は背景を拡大縮小します。画像を、アスペクト比を維持しながら、背景配置領域を完全にカバーする最小サイズに変更します。これにより、画像が空の領域や切り取られた領域なしでスペース全体を埋めることが保証されます。

対照的に、contain 値は、アスペクト比を維持しながら、背景の配置領域内に収まる最大サイズに画像を拡大縮小します。これにより、画像の周囲に空きスペースができる場合があります。

ビジュアル デモンストレーション

16x9 画面の背景として使用される 4x3 画像を考えてみましょう。

次の内容が含まれます:

• 画像はトリミングせずに画面内に収まりますが、

cover:

• 画像はトリミングされながら、垂直方向に画面全体をカバーするように拡大縮小されます。

より詳細なデモについては、このコードをチェックしてください。切り取り:

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the div.</p>
</div>

以上が切り抜きや配置の問題を発生させずに、レスポンシブにスケール変更された CSS 背景画像を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。