web-dev-qa-db-ja.com

CSS：ウィンドウよりも大きい場合は背景画像を縮小し、それ以外の場合は100％に保ちます

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

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

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

cssimagebackgroundbackground-image
8
ividyon

Max-widthのラッパーとして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%;
}
9
jensborje

本当に小さい/迅速な提案：

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

または、あなたの体で、最大幅を1920に設定し、マージンを自動に設定します。これもうまくいく可能性があります。

4
ndugger

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

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%;
}
3
vadlamani

特定のidを使用してhtml<img>タグを作成してみてください。

例えば.

[〜＃〜] html [〜＃〜]

<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />

[〜＃〜] css [〜＃〜]

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.
}

動的センタリングの場合、Javascriptをwindow.onresizeイベントと組み合わせて使用​​する必要があります。

さらに情報が必要な場合は、それに応じて投稿を編集します。

非常に使いやすい（ただし、背景を引き伸ばす）良い代替手段は、 jquery backstretch plugin を使用することです。フルスクリーンの背景画像を追加するだけで、解像度に応じて拡大縮小できます（これは正確には希望どおりではありませんが、私が考えることができる最善の代替手段です）。

1
SidOfc