CSS を使用して背景画像をレスポンシブにするにはどうすればよいですか?

CSS を使用してレスポンシブな背景画像を実現する

Web デザインでは、さまざまな画面サイズに動的に適応する背景画像を使用することが望ましいことがよくあります。これを実現するには、画像のアスペクト比を維持し、高さを比例的に拡大縮小しながら、画像の幅を利用可能なスペースに合わせる必要があります。

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;
}

Contain と Cover の違い

内容: 縦横比を維持しながら、背景配置領域内に完全に収まるように画像を拡大縮小します。 比率。これにより、画像の周囲に空きスペースができる場合があります。

Cover: アスペクト比を維持しながら、背景配置領域全体をカバーするように画像を拡大縮小します。これにより、画像がトリミングされる可能性があります。

視覚的な影響を理解する

解像度 4x3 の画像が 16x9 画面の背景として使用されると考えてください。

内容: 画像は画面内に収まりますが、どちらかに空きスペースが残ります。側面。

カバー: 画像は画面全体をカバーしていますが、上部と下部の一部が切り取られています。

この違いを説明するために、次のデモを行います:

<div class="contain">
    <!-- Background image will fit, leaving empty space -->
</div>
<div class="cover">
    <!-- Background image will cover, cropping as needed -->
</div>

.contain, .cover {
    width: 20em;
    height: 10em;
    background-image: url(example.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ccc;
    border: 1px solid;
}

.contain {
    background-size: contain;
}

.cover {
    background-size: cover;
}

以上がCSS を使用して背景画像をレスポンシブにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。