0

我正在我的 13 英寸 mac book 上创建一个网站 我尝试使用的背景图像对于我的屏幕来说太大了，这是他们在我的屏幕上开发时保持纵横比相同的一种方式，因此它看起来与按比例放大或缩小比例

我已使用此代码缩放背景图像以填充整个屏幕

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

和一个Demo，尝试调整页面大小

于 2013-02-15T17:22:43.100 回答