Question

我正在我的Mac书上创建一个13英寸的网站，我试图使用的背景图片对于我的屏幕来说太大了他们在我的屏幕上开发时保持纵横比相同的一种方式所以它看起来一样按比例放大或按比例缩小

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

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是他们设计和保持这些比率的一种方式

Answer 1

使用，

background:url(images/background.jpg) 0 0 no-repeat; 
background-position:fixed;background-size:100%;

Answer 2

我并不特定于要求，但如果您真的在寻找可重复使用的布局，请遵循此规则。它适用于所有现代浏览器

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，尝试调整页面大小

无论屏幕大小如何，都可以创建一个可以缩小和扩展的网站

2 个答案: