Dołączanie elementów wewnątrz div przy użyciu appendChild atrybut

Question

Mam div jako:

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

</div> 

Teraz w ramach tego div chcę umieścić 20 elementów, ale może rosnąć dynamicznie zapisu do 50 elementów (obrazów) również.

Używam następujący kod do dołączania tych elementów div,

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

Teraz problem jest, jak liczba elementów zwiększyć elementy idą z div, a jeśli używam maksymalna szerokość i maksymalna wysokość na zdjęciach, wynik nie ulega zmianie:

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

Czy jest coś, czego mi brakuje?

Edit: ilustracje trzeba kurczyć jak wielkość div jest ustalona

Answer 1

Jeśli szerokość jest stała, a wysokość jest dynamiczna. Obraz się skurczy i zostaną ułożone w stos. Sprawdź moje skrzypce 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 myśleć o miły sposób to zrobić z procentów,

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

jego nie całkiem, ale powinno działać.

Answer 3

i smushed coś razem ze wszystkich odpowiedzi, które pasuje do Twoich potrzeb (jeśli cię rozumiem poprawnie)

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

div ma stałą szerokość/wysokość i obrazy przyzwyczajenie z 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)+'%');; 
    } 
}