Question

我有一个div：

<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大小固定时，图像需要缩小

Answer 1

如果宽度固定且高度是动态的。图像会缩小，它们会堆叠起来。检查我的小提琴here

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>

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

它不漂亮，但应该有用。

Answer 3

我从符合您需求的所有答案（如果我理解正确的话）中将某些东西放在一起

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

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

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

3 个答案: