Question

我正在处理的网站（http://www.oatfoundry.com/）上的背景图片无法针对移动设备正确缩放。其他一切似乎工作正常，但当纵横比低于537x542时，背景图像将替换为400x800灰色占位符。有什么想法吗？

Answer 1

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响应式设计视图中调整视口大小来找到这个，就这样了知道。

背景图片拒绝扩展。替换为400x800占位符

1 个答案: