CSS 背景画像を幅に合わせて高さを自動的に調整するにはどうすればよいですか?

CSS の背景画像を幅と高さに合わせて自動拡大縮小する

問題

CSS で、幅を同じにして背景画像を設定する画像の比率を維持するために設定されたページの幅と高さに応じて調整すると、特に垂直方向のトリミングや画像の場合に問題が発生する可能性があります。

解決策:background-size: cover

CSS3 は、画像のサイズを制御できる背景サイズ プロパティを提供します。 Background-size: cover を設定すると、アスペクト比を維持しながら、背景の配置領域を完全にカバーする最小サイズに画像を拡大縮小できます。

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

この設定により、背景画像がページの幅を確実にカバーします。 、それに応じて高さがスケーリングされ、望ましい応答性とトリミング動作が得られます。

contain と cover の比較

background-size プロパティには、contain と cover という 2 つの追加値があり、異なるスケーリング動作を提供します。

• contain: 画像が切り取られることなく背景の配置領域内に収まるようにします。画像の周囲に空のスペースが表示されます。
• cover: 画像が背景の位置全体を確実にカバーします。

視覚的な比較

境界ボックス内に表示された下の画像を考えてみましょう。 contains は画像がボックス内で完全に表示されるようにしますが、cover はボックスを画像で満たし、下部がトリミングされます:

[contain および cover の背景サイズ設定を使用した画像の画像]

ライブ デモンストレーション

次のコードは、contain と 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 <code><div></code>.</p>
</div>

以上がCSS 背景画像を幅に合わせて高さを自動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。