当浏览器 window 调整大小时，背景图像被覆盖而不是调整大小

Question

我希望背景不会在浏览器 window 调整大小时调整大小，而是看起来像是将背景滑动到其内容后面。 http://portal.office.com 是我想要获得的外观的完美示例。我什至不确定这种效果叫什么，所以我什至不知道去哪里看，或者这主要是用 jQuery 还是 CSS 完成的。任何指针将不胜感激。谢谢。

编辑

正如 Stephan 指出的那样，background-size: cover 很接近，但是当 window 调整大小时，它只是切断了浏览器边缘的图像，而不是背景被其他内容切断。

Answer 1

Microsoft 站点正在使用 js 调整图像大小。当您垂直而不是水平调整浏览器大小时，它似乎只会调整大小。图片需要修复才能正常工作。

您可以执行 background-size: cover，但它会不断调整大小。您还可以使用媒体查询来阻止图像调整大小并将背景大小更改为自动并使用媒体查询。

Aeolingamenfel 所说的另一个选项是设置最大宽度。

这应该会给您一个良好的开端，但需要更多的逻辑。我会把它留给你 ;)

var w = 0;
var $window;
var $background;

function resize(e) {
  var _w = $window.width();
  
  if(w === _w) {
    $background.width(_w);
  }
  
  w = _w;
}

$(document).ready(function() {
  $window = $(window);
  $background = $('#background');
  $(window).resize(resize);
});

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#background {
  height: auto;
  position: fixed;
  background-repeat: no-repeat;
}

.login-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 70%;
  background: white;
}

<html>
  <head></head>
  <body>
    <img src="https://secure.aadcdn.microsoftonline-p.com/dbd5a2dd-6ybrougjmflxqw910ieyohr7wb4x4-yvoixrlaidmz4/appbranding/zeybopfwkgpwmcplgyvdjsbnpiq-j2ebveynzrvraxa/0/heroillustration?ts=635848522936289301" id="background" alt="" />
    <div class="login-drawer"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

http://codepen.io/anon/pen/YwPGrM

Answer 2

看起来 Microsoft 在该页面上所做的是设置某种背景，然后让实际内容 div 只占用页面右侧的固定宽度。

HTML

<div class="Content">
    [your content goes here]
</div>

CSS

body
{
  background: /* your image goes here */;
  background-size: cover; /* makes sure image covers background, can be changed */
  padding: 0;
  margin: 0;
}

.Content
{
  width: 100%;
  max-width: 300px;
  min-height: 100vh;
  margin: 0 0 0 auto; /* stay on right side if there is extra space */
  background: #fff;
}

width: 100% 和 max-width: 300px 表示在屏幕尺寸大于 300px 时，内容将只占用 space 的 300px，并会留下 space图像，但在图像下方，将占据整个宽度。

我还设置了min-height: 100vh这样即使你的内容不多，你的内容也会填满整个页面的右侧。

例子

如果你想看例子，我在 jsFiddle 上放了一个。

当浏览器 window 调整大小时，背景图像被覆盖而不是调整大小

Background Image that is covered instead of resizing when browser window resizes

html

css

jquery

background-image