Div 内で背景画像を完全に表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-07 07:28:20

オリジナル

983 人が閲覧しました

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 サイトの他の関連記事を参照してください。