8

ウィンドウの解像度に合わせて縮小するが、元のサイズ (1920x1080) を超えて拡大しない背景画像を Web サイトの本文に配置したいと考えています。そうすれば、解像度が低いユーザーでも画像全体を見ることができますが、それを超えるユーザーの背景が見苦しくアップスケールされることはありません。

背景画像が max-width のようなプロパティをサポートしているようには見えません。これは通常、そのような目的で使用します。

解決策は何ですか？これは追加のスクリプトなしで CSS で可能ですか?

4

4 に答える 4

11

最大幅のラッパーとして div を使用し、背景をその div に設定します。

HTML

<body>
 <div class="container">Content</div>
</body>

CSS 

.container {
  width: 100%;
  max-width: 1920px; /* YOUR BG MAX SIZE */
  background:url("bg.png") no-repeat;
  background-size: 100%;
}
于 2013-10-30T13:29:50.313 に答える
4

本当に小さな/簡単な提案:

それがどのように見えるか、そしてすべてが一緒に流れるbackground-size:contain;かによって、オプションになるかもしれません.

または、あなたの体では、最大幅を 1920 に設定し、余白を自動に設定します。これもうまくいくかもしれません。

于 2013-10-30T13:36:04.380 に答える
3

このように試すことができます。どのサイズの画像解像度もレスポンシブのように機能します。

img#mybg {
    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    max-width: 1920px; //set max width
    max-height: 1080px; //set max height
    z-index: -999999; //set z-index so it won't overlap any other element.
    background-size:100% 100%;
}
于 2013-10-30T12:53:23.643 に答える