JS Supersizedプラグイン - 画像はビューポートの端で切り取られます

Question

私は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 */ 

Answer 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; } 
} 

Answer 2

問題は、あなたのイメージ「のmax-width：100％」上のすべてのベースを設定し、共通のCSSから何か IMG {があれば、あなたのCSSのリセットを確認 最大幅：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