Question

I have a div for my posts which may contain images with different sizes and i need to set their container’s width individually. How do i do that?

<div class="panel">
<img id="screeny" src="http://localhost/531q3n.jpg"/>
</div>

Here’s my current try but something’s wrong:

var img = document.getElementById('screeny'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
$('.panel').css("width",width+"px");

Answer 1

The image must be loaded before you have access to it’s size, like so:

var img = $('#screeny'); 
img.load(function() {
    var width = img.width();
    var height = img.height();
    $('.panel').css("width", width);
});

EDIT: for more than one image, if they are all in a div with the class ‘panel’:

$("img", ".panel").each(function() {
    $(this).load(function() {
        var width = $(this).width();
        var height = $(this).height();
        $(this).parent().css("width", width);
    });
});