0

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

4

1 回答 1

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 */}

请注意,当屏幕宽度低于 520 像素时,背景设置为占位符...我通过查看 Firebug 中 #home 部分的计算布局发现这一点,同时在 Firefox 响应式设计视图中调整视口的大小,就像你知道的那样。

于 2013-07-26T12:46:09.483 回答