简体   繁体   English

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

[英]Dynamically change size of div and all its content?

Please note that this is not the same question as "change a div size to fit content". 请注意,这与“更改div大小以适合内容”不同。 What I have is a relatively positioned div with a couple of absolutely positioned images inside it: 我所拥有的是一个相对定位的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>

What I also have is a Javascript/jQuery function. 我还拥有一个Javascript / jQuery函数。 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. 我需要做的是-给定某个参数(以百分比表示),它应按该百分比动态调整div和其中的图像的大小。

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). 因此,如果div的高度最初是600px,而“ nj_ruler”图像的高度是400,则调用resizeAll(25)会将div的高度增加到750px,将图像的高度增加到500px(增加25%)。

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. 稍后在div中会有更多的元素,如果可能的话,我想有一个函数来调整所有内容的大小,而无需单独引用div中的每个元素。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM