0

图像容器 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);

});

img src我得到了使用 jQuery所需的宽度和高度。指导我将其设置img scr为窗口宽度超过 1024（初始文档加载或窗口调整大小之后）。在小于 1024 的窗口宽度以下（对于响应式设计），我希望每行有任意数量的图像（可能是 4 ,3 或 2）而没有任何间隙。

所以我想实现

  1. 动态宽度和高度参数仅适用于大于 1024 的窗口宽度。
  2. 对于窗口宽度小于 1024 的图像宽度和高度使用 css3 媒体查询
4

1 回答 1

2

我认为这会有所帮助。如果 ，下面的代码将更改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);
   }
}
于 2013-07-16T08:06:51.187 回答