在调整div时调整div背景图像到中间（它响应div）

Question

以下是我遇到问题的Codepen：

http://codepen.io/rasmus/pen/pvXjOG

HTML：

<div></div>

css：

div {
  background: url("http://placehold.it/600x300");
  background-size: cover;
  max-width: 600px;
  height: 300px;
}

当我正在调整div的大小时 - 因为我的视口比600px窄，例如 - 背景图像被“裁剪”到左侧。但是我想让它在两边“裁剪”，这样我仍然可以看到画面的中间部分。

我的错是什么？我知道可以做到。一个例子是http://comfortzonecrusher.com，例如

Answer 1

请使用：

background-position: center;

所以你的CSS变成了：

div {
  background: url("http://placehold.it/600x300");
  background-size: cover;
  background-position: center;
  max-width: 600px;
  height: 300px;
}

更新了Codepen：http://codepen.io/anon/pen/xbowmZ

Answer 2

在您的div上尝试background-size: contain;。