ホームページ >ウェブフロントエンド >CSSチュートリアル >Div 内で背景画像を完全に表示するにはどうすればよいですか?

Div 内で背景画像を完全に表示するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-07 07:28:20977ブラウズ

How to Make a Background Image Fully Visible Within a Div?

背景画像を Div に合わせる

背景画像が div 内で部分的に隠れている場合、それを確実に隠す方法がいくつかあります。完全に表示されます。 background-size プロパティを使用すると、次の 2 つのオプションが提供されます。

背景画像のスケーリング

背景画像が div 内に収まるようにスケーリングされるようにするには、次を使用します。

background-size: contain;

Div 全体を背景で覆う画像

または、div 全体をカバーするように背景画像を拡大縮小するには、次を使用します:

background-size: cover;

例:

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}
<div>

この手法により、背景画像が指定された div 内に適切に表示されることが保証されます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。