我正在处理的网站(http://www.oatfoundry.com/)上的背景图片无法针对移动设备正确缩放。其他一切似乎工作正常,但当纵横比低于537x542时,背景图像将替换为400x800灰色占位符。有什么想法吗?
答案 0 :(得分:2)
media.css文件中有这条规则:
@media screen and (max-width: 520px) {
#home {
width:100%;
height:100%;
color:#FFF;
background:url('http://www.placehold.it/1400x800')50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment : fixed; /* FIXED FOR IE */}
请注意,当屏幕宽度超过520px时,背景设置为占位符...我通过观察Firebug中#home部分的计算布局,同时在Firefox响应式设计视图中调整视口大小来找到这个,就这样了知道。