web-dev-qa-db-ja.com

幅、高さに合わせてCSSの背景画像を自動調整します。

私は持っています

body {
    background: url(images/background.svg);
}

望ましい効果は、この背景画像の幅がページの幅と同じになり、高さが比率を維持するように変化することです。例えば元の画像がたまたま100 * 200（任意の単位）で、本体の幅が600ピクセルの場合、背景画像は1200ピクセルの高さになります。ウィンドウのサイズを変更すると、高さは自動的に変わります。これは可能ですか？

現時点では、Firefoxは高さを調整してから幅を調整しているようです。これはおそらく高さが最長の寸法であり、トリミングを避けようとしているからでしょうか。 I 欲しい 垂直にトリミングしてからスクロールする：水平方向の繰り返しはしない。

また、Chromeはbackground-repeat:repeatが明示的に指定されている場合でも画像を中央に配置し、繰り返しはしません。いずれにせよデフォルトです。

htmlcss
300
spraff

これにはCSS3プロパティ、つまり background-size （ 互換性チェック ）があります。長さの値を設定することはできますが、通常は特別な値containおよびcoverと共に使用されます。あなたの特定のケースでは、あなたはcoverを使うべきです：

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

containおよびcoverの卵の説明

まずい申し訳ありませんが、デモンストレーションには Biswarup Gangulyによる今日の写真 を使用します。これがあなたのスクリーンであり、灰色の領域はあなたの見えるスクリーンの外側にあると言うことができます。デモンストレーションのために、私は16x9の比率を想定します。

screen

背景として前述のその日の写真を使いたいのです。ただし、何らかの理由で画像を4×3にトリミングしました。 background-sizeプロパティを固定長に設定できますが、containとcoverに焦点を当てます。 bodyの幅や高さを壊していないとも思います。

contain

contain

画像の縦横比（ある場合）を維持しながら、画像の幅と高さの両方が背景の配置領域内に収まるように、画像を最大サイズに合わせます。

これは背景画像が常に背景位置決め領域に完全に含まれることを確実にします、しかし、この場合あなたのbackground-colorで満たされた若干の空のスペースがあるかもしれません：

contain

cover

cover

画像の縦横比（ある場合）を維持しながら、画像の幅と高さの両方が背景の配置領域を完全にカバーできるように、画像を最小サイズに拡大縮小します。

これは背景画像がすべてを覆っていることを確認します。目に見えるbackground-colorはありませんが、画面の比率によっては、画像の大部分が切り取られる可能性があります。

cover

実際のコードでのデモ

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}
<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>
717
Zeta

からのヒントに基づいて - https://developer.mozilla.org/en-US/docs/CSS/background-size 私は私のために働いた次のレシピで終わる

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}
32
Yauhen Yakimovich

私があなたが何を探しているのか正確には分かりませんが、CSS-TricksのChris Coyierによって書かれたこれらの素晴らしいブログ記事をチェックするべきです：

http://css-tricks.com/how-to-resizeable-background-image/ /

http://css-tricks.com/perfect-full-page-background-image/ /

各記事の説明を読み、それらがあなたが探しているものであるかどうかを確かめてください。

最初の回答は、次の質問です。

背景画像をサイズ変更可能にする方法はありますか？のように、ブラウザウィンドウのサイズに関係なく、Webページの背景に画像を埋めます。また、ブラウザウィンドウの変更に合わせてサイズを変更します。また、それがその比率を保持していることを確認してください（奇妙には伸びません）。また、スクロールバーは表示されず、必要に応じて垂直方向に切り取られるだけです。また、インラインタグとしてページに表示されます。

2番目の投稿の目的は、「常にブラウザウィンドウ全体をカバーするWebサイトの背景画像」を取得することです。

お役に立てれば。

11
element119

これを試して、

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
7
Laxman Maurya

この一行を追加するだけです。

    .your-class {
        height: 100vh;
    }

vhはビューポートの高さです。これはデバイスのブラウザウィンドウに合わせて自動的に拡大縮小されます。

ここでもっとチェックしてください： ブラウザウィンドウのdivを100％の高さにする

6
Ruto Collins

背景画像がPerfectに設定されていない場合、彼のcssは問題作成であるため、彼のcssファイルは次のコードに変更されます

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

％;背景サイズ：100％100％; "

6
jignesh vasoya
body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}
2
Adriaan Mouton

私は同じ問題を抱えていた、ブラウザの寸法を調整するときに画像のサイズを変更することができません。

悪いコード：

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}


グッドコード：

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

ここで重要なのは、この要素を追加することです - > background-size：contains;

2
CodingWoodsman

これは私のために働いたものです：

background-size: auto 100%;
1
Danny McMurray