Appending the elements within div using appendchild attribute

Question

I have a div as :

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

</div>

Now within this div I want to place 20 elements, but dynamically it can grow upto 50 elements(images) also.

I am using the following code to append these elements in a div,

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

Now, the issue is ,as the number of elements increase the elements are going out of div ,and if I use the max-width and max-height on images, the result doesnt change:

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

Is there anything which I am missing?

Edit: The images need to shrink as the div size is fixed

Answer 1

If the width is fixed and the height is dynamic. The image will shrink and they will get stacked. Check my fiddle 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

Cant think of a nice way to do it with percentages,

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

its not pretty but should work.

Answer 3

i smushed something together from all the answers that fits your needs (if i understand you correctly)

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

the div has fixed width/height and the images wont get out of the 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)+'%');;
    }
}