所以我使用Supersized插件(http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/)来显示网站背后的美丽背景图片。它通常会延伸到适合您浏览器窗口的大小。在iPad上,背景在视口末端切断。我可以捏一下看整个网站并放大。但背景仍然存在。
我需要做的最重要的事情是图像填充内容的长度和高度。链接和css如下:
http://www.xsp.com/new_site/index.php
在这里的枪下,非常感谢任何帮助。感谢。
/* 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 */
答案 0 :(得分: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; }
}
答案 1 :(得分:1)
问题来自普通的css,它基于" max-width:100%" 检查你的css重置是否有什么 img {max-width:100%; }
超大官员有一个文件解决方案" supersized.3.2.7.js": https://github.com/buildinternet/supersized/issues/103
如果您无法通过官方解决方案解决问题,请尝试在超大的css中添加此内容:
#supersized img { max-width: none; }