0

私は次のような水平スクロールギャラリーを構築しています

<ul class='scroll'>
<li class='img'>
<img/>
</li>
</ul>
<li class...

サポートするCSSは次のようになります。

.img {
float: left;
display: inline;
height:90%;
width:auto;
}

.scroll {
    display:block;
    max-height:800px; 
    height:100%
}

.img img {
    margin:5px 10px;
    float:left;
    max-height:100%;
    height:auto;
    width:auto;
}

現時点ではうまく機能しています。ロード時に画像のサイズを変更し、800pxの高さで最大にします。ただし、ウィンドウのサイズを小さく（または小さいものから大きいものに）変更すると、li.imgは画像に合わせてサイズ変更されません。つまり、大きな白い境界線または重複する画像が残ります。

クロムのINSPECTELEMENTで画像を選択すると、すべてが魔法のように所定の位置にジャンプします。

サイズ変更時にブラウザにLIタグを再描画させるJQUERYソリューション（Inspectorを開くなど）や、含まれているIMG幅にLIをロックする他の方法があるかどうか疑問に思いました。

4

1 に答える 1

0

あなたが使用することができます

$(window).resize(function(){
  ...
});

正しい高さを計算する関数を呼び出します。

于 2012-05-14T15:22:05.003 に答える