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）有任意数量的图像而没有任何间隙。

所以我想实现

动态宽度和高度参数仅适用于大于1024的窗口宽度。
窗口宽度小于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);
   }
}

仅适用于特定容器宽度的图像的动态宽度

1 个答案: