动态更改div的大小及其所有内容?

时间:2012-12-14 11:57:46

标签: javascript jquery

请注意,这与“更改div大小以适合内容”的问题不同。我所拥有的是一个相对定位的div,里面有几个绝对定位的图像:

<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>

我还有一个Javascript / jQuery函数。这个功能是我的问题所在。我需要它做的是 - 给定一个特定的参数(百分比)它应该动态调整div和它内部的图像的百分比。

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

因此,如果div高度最初是600px而“nj_ruler”图像高度是400,则调用resizeAll(25)应该将div的高度增加到750px,将图像的高度增加到500px(增加25%)。 / p>

有没有办法在不增加每个高度的情况下完成此操作? div中将会有更多的元素,如果可能的话,我希望有一个函数来调整所有内容的大小,而不是单独指向div中的每个元素。

1 个答案:

答案 0 :(得分:1)

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