1

So I'm using the Supersized plugin (http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/) to display beautiful background images behind the site. It normally stretches to fit whichever size your browser window is. On the iPad, the background cuts off at the end of the viewport. I can pinch to see the whole site and zoom in just fine. But the background stays put.

The most important thing I need to have is the images fill the length and height of the content. Link and css below:

http://www.xsp.com/new_site/index.php

Any help is greatly appreciated, under the gun here. Thanks.

    /* Supersized styles */
    #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

    #supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
    #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
    #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
    #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }           /*Quality*/

    #supersized li { display:block; margin: 0; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
    #supersized a { width:100%; height:100%; display:block; }
    #supersized li.prevslide { z-index:-20; }
    #supersized li.activeslide { z-index:-10; }
    #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
    #supersized li.image-loading img{ visibility:hidden; }
    #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
    /* Supersized styles end */
4

2 回答 2

1

我想出了一种使用 iPhone/iPad css 媒体查询来修复它的方法。这可能不是最好的方法，更像是在上面贴上胶带，这样它就会粘在一起。但它有效，所以我很高兴：

/*Fix Supersized on iOS*/

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#supersized { margin-left:0;}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#supersized { width:110% !important;}
}


/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
#supersized { margin-left:0; }
}
于 2012-04-13T17:24:36.333 回答
1

问题来自将您的图像全部设置为“max-width:100%”的常见 css 检查您的 css 重置是否有 img { max-width: 100%; }

超大官方对文件“supersized.3.2.7.js”有解决方案： https ://github.com/buildinternet/supersized/issues/103

如果按照官方解决方案无法解决，请尝试将其添加到您的超大 css 中：

#supersized img { max-width: none; }

这个棘手的是http://blog.valderama.net/node/30

于 2013-09-15T10:28:54.563 回答