JS Supersized 插件 - 图像在视口边缘截断答案

【问题标题】：JS Supersized plugin - images cutting off at edge of viewportJS Supersized 插件 - 图像在视口边缘截断
【发布时间】：2012-03-30 14:58:10
【问题描述】：

所以我使用 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 */

【问题讨论】：

标签： jquery html css supersized

【解决方案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; }
}

【讨论】：

好消息是，我不久前使用第一响应者的回答让它工作了。坏消息是他们被另一家公司收购了，网站设计已经不复存在了。不过感谢这段代码。我一定会将它纳入未来的项目中。

【解决方案2】：

问题来自于将图像设置为全部基于“max-width:100%”的通用 css 检查你的css重置是否有东西 img { 最大宽度：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

【讨论】：