CSS を使用して背景画像を Div に完全に適合させるにはどうすればよいですか?

背景画像を Div に合わせる

背景画像を div 内に配置すると、画像が切り取られる問題がよく発生します。オフになっているか、正しくフィットしていません。この問題に対処するために、CSS は、背景画像のスケーリングと位置を正確に制御できる、background-size プロパティを提供します。

Div 内に収まるように背景画像をスケーリングする

背景画像が切り取られることなく div の境界内に表示されるようにするには、background-size プロパティを次のように設定します。 contains:

background-size: contain;

Div 全体をカバーするように背景画像をスケーリングする

あるいは、背景画像が div 全体を占めるようにするには、cover:

background-size: cover;

ビジュアルデモ

背景画像を含む div を含む次の HTML コードを考えてみましょう:

<div>

画像が途切れないようにするには、background-size プロパティを適用します:

#mainpage {
  background-size: contain;
}

または、画像が div 全体をカバーするようにするには:

#mainpage {
  background-size: cover;
}

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