JS超大插件 - 在視口邊緣切斷的圖像

所以我使用Supersized插件（http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/）來顯示在站點後面的美好的背景圖象。它通常延伸到適合您的瀏覽器窗口的大小。在iPad上，背景在視口的最後切斷。我可以捏看到整個網站，並放大就好了。但背景仍然存在。JS超大插件 - 在視口邊緣切斷的圖像

我需要的最重要的事情是圖像填充內容的長度和高度。鏈接和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 */

來源

2012-03-30 Dave Rottino

我想通過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-13 17:24:36

好消息是，我得到了它前一段時間的工作使用第一響應者的回答。壞消息是他們被另一家公司收購，網站設計不再。儘管感謝這段代碼。我一定會把它整合到未來的項目中。 – 2013-09-16 13:47:40

的問題是從設置在圖像上「最大寬度：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

來源

2013-09-15 10:28:54 bard

JS超大插件 - 在視口邊緣切斷的圖像

回答

相關問題