Dynamically change size of div and all its content?

Question

Please note that this is not the same question as "change a div size to fit content". What I have is a relatively positioned div with a couple of absolutely positioned images inside it:

<div id="nj_size_holder">
    <img id="nj_credit_card" src="credit_card.png" width="340"/>
    <img id="nj_ruler" src="ruler.jpg" />
    <img id="nj_item_image" src="{$base_dir_ssl}img/p/{$imgurl}" height='{$imgheight}'/>
</div>

What I also have is a Javascript/jQuery function. This function is where my question lies. What I need it to do is - given a certain parameter (as a percentage) it should dynamically resize both the div and the images inside it by that percentage.

function resizeAll(perc){
    //resize everything here
}

So if the div height is initially 600px and the "nj_ruler" image height is 400, calling resizeAll(25) should increase the height of the div to 750px and the height of the image to 500px (25% increase).

Is there a way to accomplish this without increasing each height individually? There will be more elements in the div later on and, if possible, I'd like to have a function which resizes everything without referring to every element within the div individually.

Answer 1

var increaseby=25; //in percent
$("#nj_size_holder, #nj_size_holder > img").each(function() {
      $(this).css("height",$(this).css("height")*((increaseby+100)/100));
});