Dynamic image width in ul/li

Question

I have code that sets li width dynamically on window resize. It divides 100% with the current number of li tags.

Code looks like this:

$(document).ready(function() {
    var num = $('li').length;
    var width_li = 100 / num;
    $('li').css('width', width_li + '%');
});​

Test it here: http://jsfiddle.net/jbew7/

How can I make it resize images that's inside the li tags to?

Answer 1

li img {
   width: 100%;
   height: 100%;
}

100% percent will make sure that image width/height remains same as the width/height of li..

Answer 2

You can use CSS:

li img {
   width: 100%;
   height: auto;
}