使用appendChild属性在div中添加元素

Question

I have a div as :

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

</div>

现在，在这个div里，我想放置20个元素，但是动态地它可以增长到50个元素(图片)。

我正在使用以下代码将这些元素添加到一个div中，

var i = document.createElement("img");
var d= document.getElementById("div1");
d.appendchild(i);

现在的问题是，随着元素数量的增加，元素会超出div的范围。如果我在图片上使用max-width和max-height属性，结果也不会改变：

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

有我漏掉的东西吗？

编辑： 随着div大小固定，图像需要缩小。

- user1907849

---

尝试将height:auto或height:100%添加到您的div中。 - Guruprasad J Rao

你希望发生什么？是让 div 变大还是让图片缩小？ - znap026

不，它并没有解决问题。 - user1907849

@znap026：缩小图像是理想的解决方案。 - user1907849

你有一个 jsfiddle 可以展示代码的工作吗？ - Andrew

不好意思，现在我没有 jsfiddle 可以展示。 - user1907849

Answer 1

如果宽度固定而高度是可变的，图片将会缩小并堆叠。请查看我的fiddle这里。

img {
    width:100%;
    display:inline-block;
}

<div style="width:100px;border: 1px solid black;">

    <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
    <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
    <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />

</div>

- Drixson Oseña

Answer 2

无法用百分比的方式来实现，

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

虽然不够美观，但应该能够正常工作。

- znap026

Answer 3

我从所有答案中整合了一些内容，符合您的需求（如果我正确理解了您的意思）。

有固定的宽度/高度，而图像不会超出该div。

https://jsfiddle.net/b30d88g6/3/

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)+'%');;
    }
}

- roeb