当窗口大小调整为小于背景宽度时，如何使div保持居中

Question

我有一个内容div，其背景位于包装容器的中心。当您将浏览器窗口的大小调整为小于500px的背景图像时，我想知道如何使此背景图像保持居中。

现在，它开始从右侧切断图像。

http://jsfiddle.net/kon0w3t3/1/

＆＃13;

＆＃13;

div.wrapper {
  width: 100%
}

div.content {
  background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg) 
              no-repeat scroll center 0 transparent;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  display: block;
}

＆＃13;

<div class="wrappper">
  <div class="content"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将max-width: 100%添加到您的内容div中。这将防止它扩展到包装器的大小以外，保持背景居中。

div.wrapper {
  width: 100%
}

div.content {
  background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg)
              no-repeat scroll center 0 transparent;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

<div class="wrappper">
  <div class="content"></div>
</div>

更新了小提琴：http://jsfiddle.net/eb51hxj1/