隊李來調整寬度沿着它所含IMG

Question

我構建一個水平滾動畫廊，看起來像

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

在它的偉大工程的時刻。在加載時，圖像的大小調整爲800像素高度。但是什麼是真正竊聽我是當我窗口大小調整到一個較小的（或從小到大）的li.img不與圖像調整，這意味着你只剩下兩種巨大的白色邊界或重疊的圖像。

如果我選擇在Chrome瀏覽器這一切奇蹟般地跳躍到地方檢查元素的圖像。

我想知道是否有一個JQUERY解決方案，強制瀏覽器重新調整大小的LI標籤（如打開Inspector）或任何其他方式將LI鎖定到包含的IMG寬度？

Answer 1

你可以使用

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

，並調用它計算出正確的高度的功能。