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

Question

我有一个以wrapper容器为中心的背景的内容div。我想知道如何保持这个背景图像居中，当你调整浏览器窗口的大小超过500像素的背景图像。

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

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

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

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

Answer 1

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

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/