Question

I’ve figured out how to get the width and hight of an image using javascript. My question is how do I apply the width and height to it’s nearest parent in this case it’s li using javascript.

<ul>
    <li> <img src="img1.jpg" /> </li>
    <li> <img src="img2.jpg" /> </li>
</ul>

The js i’m using:

$(window).load(function() {
    var pic = $('img');
    var w = pic.width();
    var h = pic.height();

    pic.removeAttr("width"); 
    pic.removeAttr("height");

    $('ul li').css('width',w);
});

Right now it is only getting the width and height of the first image and applying it to every li.

Answer 1

The solution below has been modified to demonstrate its effectiveness:

CSS:

li {
  border: 1px solid #000; 
  width: 80px;
  height: 100px;
}

HTML:

<ul>
    <li id="one"> <img src="img1.jpg" width="50" height="80" /> </li>
    <li id="two"> <img src="img2.jpg" width="70" height="50" /> </li>
</ul>
<input type="button" value="Change" id="change">

jQuery:

$('#change').click(function(){
    $('img').each(function(){
        e = $(this);
        dim = [e.width(),e.height()];
        e.parent().css({width: dim[0], height: dim[1]});
    });
});

Example: http://jsfiddle.net/kfnhh/

Simply remove the click event handler and the code should be easily implemented in your environment.