ページの幅に合わせて背景画像を比例的に拡大縮小するにはどうすればよいですか?

背景画像を比例的に拡大縮小する: 幅を維持し、高さを自動的に調整する

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

目的の効果を達成するには、背景画像の幅はページの幅と一致し、高さは自動的に拡大縮小されるため、CSS3 の背景サイズ プロパティを利用できます。これを cover に設定すると、幅と高さの両方が背景の配置領域を完全にカバーする最小サイズに画像を拡大縮小するようにブラウザーに指示します。

コードの実装

次の CSS コード スニペットです。この効果を実装します:

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

追加の機能拡張として、background-position のオプションの引数を使用して、画像を垂直方向の中央に配置することができます。

contain と cover のエッグスプラネーション

contain と cover の違いを明確にするために、例を使用してみましょう。

Contain:

画像は背景配置領域内に含まれ、空のスペースは背景色で埋められます。

カバー:

画像は位置決め領域を完全にカバーしていますが、その一部が切り取られる可能性があります。

結論

background-size: cover を使用すると、ページの比率を維持しながら、ページの幅に合わせて自動的に拡大縮小するレスポンシブな背景画像。この技術により、さまざまな画面サイズに適応する、流動的で視覚的に魅力的なデザインが可能になります。

以上がページの幅に合わせて背景画像を比例的に拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。