Dynamic width of image for specific container width only

Question

Image container div "imagebox" contains list item with images.

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>

Actual image size in 400 px x 300 px. Now I want to set width and height for img src dynamically using jQuery so imagebox div contains 5 images/row only. I want to set it dynamically only for window width more than 1024. So even if window width is 1600 and window is resizes up to 1024, image width and height gets resize to maintain number of images per row.

jQuery

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

});

I got width and height required for img src using jQuery. guide me to set this for img scr for window width more than 1024 (initially document load or after on window resize). And below window width less than 1024 ( for responsive design) I want to have any number of images per/row (may be 4 ,3 or 2) without any gaping.

So I want to achieve

Dynamic width and height parameter works only for window width more than 1024.
for window width less than 1024 image width and height using css3 media queries

with 20% I can get 5 images /row , but i want to set 5 images/row upto window width 1024 px only. below this width I want to set static width height for images using css3 for different screen widths — galexy
@Fags --> Thanks for helpful fiddle . But you have set static width and height so there is gaping remains . I want to occupy whole imagebox thats why I want to set dynamic width & height,so even after window resize there will be no gaping. — galexy

Jo E. Jo E. · Accepted Answer · 2013-07-16T08:06:51

I think this will help. The code below will change your_images height and width if window size is > 1024, and runs on window resize as well as document ready.

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

Dynamic width of image for specific container width only

1 Answers