CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
galexy
galexy

Reputation: 343

Dynamic width of image for specific container width only

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

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

Upvotes: 0

Views: 1001

Answers (1)

Joe
Joe

Reputation: 8292

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

Upvotes: 2

Related Questions