0

Mac book 13 インチで Web サイトを作成しています。使用しようとしている背景画像が画面に対して大きすぎます。これは、画面上で開発するときに縦横比を同じに保つための方法であり、拡大しても同じように見えます。縮小されました

このコードを使用して、背景画像をスケーリングして画面全体を埋めました

background: url(images/background.jpg) no-repeat center center fixed; 
    background-size: cover;
    background-size: cover;
    background-size: cover;
    background-size: cover;

ページラップを使用してコンテンツをラップしました

#wrapper {margin: 0 auto 0 auto; width:1070px;height:auto;

しかし、それは起こることではない画像をラッピングして出てくるだけです ラッパーはそれに残されたスペースと同じ幅ですが、背景画像と重なるため配給はオフです 1772x1240 緑色のボックスの幅は 1070 です 彼らのそれらの比率を設計して維持する方法

4

2 に答える 2

1

使用する、

background:url(images/background.jpg) 0 0 no-repeat; 
background-position:fixed;background-size:100%;
于 2013-02-15T17:15:57.503 に答える
0

私は要件に固有ではありませんが、再利用可能なレイアウトであるものを本当に探している場合は、これに従ってください。最新のすべてのブラウザで動作します

HTML 

  <div class="table">
    <div class='row'>
      <div class='cell'>1</div>
      <div class='cell'>2</div>
      <div class='cell'>3</div>
      <div class='cell'>4</div>
    </div>
  </div>

CSS：

  .table{
     height: 50px;
     width:100%;
     background-color:Red;
     display:table;
     table-layout:fixed;
  }
  .row{
     display:table-row
  }
  .cell{
     display:table-cell;
     line-height:50px;
     text-align:center;
  }

そしてデモ、ページのサイズを変更してみてください

于 2013-02-15T17:22:43.100 に答える