CSS でスケーラブルな背景画像を設定するときにアスペクト比を維持するにはどうすればよいですか?

スケーラブルな背景画像: アスペクト比の維持

Web デザインでは、ページのサイズにシームレスにフィットする背景画像を設定することができます。トリッキーなタスク。開発者は、画像が不均衡に引き伸ばされたり切り取られたりして、望ましくない結果が生じるという問題に遭遇することがよくあります。ただし、CSS3 は、background-size プロパティを使用して、この苦境に対する洗練された解決策を提供します。

background-size プロパティを使用すると、背景画像のサイズをさまざまな方法で指定できます。画像のアスペクト比を維持しながらボディ要素の寸法に確実に適合させるには、カバー値を使用します。

背景サイズをカバーに設定すると、画像は自動的に完全に収まる最小サイズに拡大縮小されます。背景の配置領域をカバーします。これは、画像が常にページの幅全体に表示され、元の比率を維持するように高さが調整されることを意味します。

たとえば、次のコードを考えてみましょう。

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

この CSS は、 Background.svg 画像がページの幅全体に収まるようにし、高さは比率を維持するためにそれに応じて拡大縮小します。

Contain と Cover について

CSS3 では、background-size プロパティに 2 つの主な値があります:contain と cover。どちらの値も画像のアスペクト比を維持しますが、動作は異なります。

• contain: 背景配置領域内に完全に収まる最大のサイズに画像を拡大縮小します。これは、画像の外側の一部の領域が空のままになる可能性があることを意味します。
• cover: 背景の配置領域を完全にカバーする可能な最小サイズに画像を拡大縮小します。これにより、画像の一部の領域が切り取られる可能性があります。

contain と cover の違いを視覚化するのに役立つ方法は、画面を表す四角形と画像を表す四角形を想像することです。

• contain: 画像の四角形は画面の四角形の内側に収まり、周囲に空きスペースが残る可能性があります。
• カバー: 画像の四角形が画面の四角形を満たすように拡大され、画像の一部が切り取られる可能性があります。

以上がCSS でスケーラブルな背景画像を設定するときにアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。