仅针对特定容器宽度的图像动态宽度

Question

图像容器 div "imagebox" 包含带有图像的列表项。

CSS：

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

    li.image{
    float:left;
}

html

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

实际图片尺寸为 400 像素 x 300 像素。现在我想使用 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

我认为这会有所帮助。如果window size is > 1024，下面的代码将更改your_images 的高度和宽度，并在调整窗口大小和准备好文档时运行。

$(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);
   }
}