僅用於特定容器寬度的圖像動態寬度

Question

圖像容器div「imagebox」包含帶圖像的列表項。

CSS：

ul.imagebox { 
    width =100%; 
    min-height:1000px; 
    margin:0 
    } 

    li.image{ 
    float:left; 
} 

HTML在400像素×300像素

<ul class="imagebox"> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li> 
</ul> 

實際圖像尺寸。現在我想動態使用jQuery爲img src設置寬度和高度，所以imagebox div只包含5個圖像/行。我只想爲1024以上的窗口寬度動態設置它。因此，即使窗口寬度爲1600，窗口大小調整到1024，圖像寬度和高度也會調整大小以保持每行圖像數量。

jQuery的

$(window).ready (function(){ 
var imagebox = $("ul#imagebox").width(); 
var image_width = (imagebox/5); 
var image_height = (image_width * 0.75); 

}); 

我得到的寬度和使用jQuery需要img src高度。指導我爲img scr設置窗口寬度超過1024（初始文檔加載或窗口大小調整後）。 並且在低於1024的窗口寬度下（對於響應式設計），我希望每個/行具有任意數量的圖像（可以是4個，3個或2個），沒有任何間隙。

所以我想實現

1. 動態的寬度和高度參數僅適用於窗口寬度超過1024
2. 爲窗口寬度小於1024圖像的寬度和使用CSS3媒體查詢高度

Answer 1

我認爲這會有所幫助。下面的代碼將更改your_images高度和寬度，如果window size is > 1024，並在窗口調整大小以及文檔就緒運行。

$(document).ready(function() { 
    changeSize(); 
}); 
$(window).resize(function() { 
    changeSize(); 
}); 

function changeSize() { 
    var docw = $(document).width(); 

    var imagebox = $(".imagebox").width(); 
    var image_width = (imagebox/5); 
    var image_height = (image_width * 0.75); 

    if(docw >= 1024){ 
    $("your_images").width(image_width); 
    $("your_images").height(image_height); 
    } 
}