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

概述我有一个内容div,背景在包装容器中居中.当您将浏览器窗口的大小调整为小于500px的背景图像时,我想知道如何使此背景图像保持居中. 现在,它开始从右侧切断图像. http://jsfiddle.net/kon0w3t3/1/ div.wrapper { width: 100%}div.content { background: url(http://24.media.tumblr. 我有一个内容div,背景在包装容器中居中.当您将浏览器窗口的大小调整为小于500px的背景图像时,我想知道如何使此背景图像保持居中.

现在,它开始从右侧切断图像.

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 >  <div ></div></div>

解决方法 将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 >  <div ></div></div>

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

总结

以上是内存溢出为你收集整理的html – 当窗口大小调整为小于背景宽度时,如何使div保持居中全部内容，希望文章能够帮你解决html – 当窗口大小调整为小于背景宽度时,如何使div保持居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。