Javascript 使用appendchild属性在div中追加元素

我有一个部门：

<div id="div1" width="100px" height="100px">

</div>

现在，问题是，随着元素数量的增加，元素将脱离div，如果我在图像上使用最大宽度和最大高度，结果不会改变：

i.setAttribute('max-width', '100%');
i.setAttribute('max-height', '100%');

有什么我遗漏的吗

编辑：

---

如果宽度是固定的，高度是动态的，则图像需要收缩，因为div大小是固定的。图像将缩小，它们将堆叠起来。检查我的小提琴

img{
宽度：100%；
显示：内联块；
}

我想不出一个好办法用百分比来做

var imags = document.getElementsByTagName('img');
var count = imags.length;
for (var index= 0,l= count;index<l;index++){
    imags[index].setAttribute('height', (100/count)+'%');;
}

var imags=document.getElementsByTagName（'img'）；
变量计数=imags.length；
对于（var index=0，l=count；index我从所有符合您需要的答案中总结出了一些东西（如果我理解正确的话）


div具有固定的宽度/高度，图像不会从div中消失

function add_img() {

    var i = document.createElement("img");
    i.src= "https://jsfiddle.net/img/logo.png";
    var d= document.getElementById("div1");
    d.appendChild(i);

    var imags = document.getElementsByTagName('img');
    var count = imags.length;
    for (var index=0, l=count;index<l;index++){
        imags[index].setAttribute('height', (100/count)+'%');;
    }
}

函数add_img（）{
var i=document.createElement（“img”）；
i、 src=”https://jsfiddle.net/img/logo.png";
var d=document.getElementById（“div1”）；
d、 儿童（一）；
var imags=document.getElementsByTagName（'img'）；
变量计数=imags.length；
对于（var index=0，l=count；index将
height:auto
或
height:100%
添加到您的
div
中，您希望发生什么？div将增长还是图像将收缩？不，它无法解决问题problem@znap026：要收缩的图像是理想的解决方案您是否有JSFIDLE向我们展示代码工作情况
var imags = document.getElementsByTagName('img');
var count = imags.length;
for (var index= 0,l= count;index<l;index++){
    imags[index].setAttribute('height', (100/count)+'%');;
}

function add_img() {

    var i = document.createElement("img");
    i.src= "https://jsfiddle.net/img/logo.png";
    var d= document.getElementById("div1");
    d.appendChild(i);

    var imags = document.getElementsByTagName('img');
    var count = imags.length;
    for (var index=0, l=count;index<l;index++){
        imags[index].setAttribute('height', (100/count)+'%');;
    }
}