-1

わかりましたので、これが取引です。物事をできるだけきれいに学び、維持したいので、これにはjqueryプラグインを使用しないことにしました。

フルスクリーンの水平スライドショーを作成しようとしています。

幅と高さが 100% のコンテナー div があります。

幅が 999% のサブコンテナがあります

そのサブコンテナ内に画像が左に浮かんでいますが、ここに問題があります。各画像をサブコンテナではなく、メインコンテナの div または 100% の幅にしたいのです。ブラウザのサイズに応じて画像のサイズが比例して変更されるように作成しているため、特定の px サイズを指定することはできません。

これについてどうすればいいですか？ウィンドウのサイズ変更でjqueryを使用して、画像のdivサイズをドキュメントサイズに取得および設定しようとしましたが、何らかの理由で機能しません。ウィンドウのサイズを変更するとすぐに、画像の幅がドキュメントの幅の 100% を超えます。

編集：要求されたように、コードの例を次に示します。基本的に、.imgBlock の幅を常にメイン コンテナーの幅にしたいと考えています。幅が可変のサブコンテナにあるため、幅として 100% を使用することはできません。

#mainContainer {
float:left;
width:100%; 
height:100px; 
position:relative; 
background:#000;        
}

#subContainer {
width:auto; 
height:100%;
background:#f00;
float:left;   
}

.imgBlock {
float:left; 
height:100%; 
border:1px solid #fff;    
}

<div id="mainContainer">
<div id="subContainer">
    <li class="imgBlock"><h1>IMAGE</h1></li>
    <li class="imgBlock"><h1>IMAGE</h1></li>
    <li class="imgBlock"><h1>IMAGE</h1></li>
    <li class="imgBlock"><h1>IMAGE</h1></li>
    <li class="imgBlock"><h1>IMAGE</h1></li>
</div>
</div>
4

1 に答える 1

0

わかりました resize() jquery 関数が機能しました。この問題は、メイン コンテナが overflow:hidden ではないために発生したようです。

var docuW = $(document).width();
$(".imgBlock").css({'width': docuW });

$(window).resize(function() {
    docuW = $(document).width();
    $(".imgBlock").css({'width': docuW });  
});
于 2012-12-27T00:02:35.033 に答える