विशेषता

Question

appendChild का उपयोग कर div भीतर तत्वों जोड़ना मैं एक 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 से बाहर जा रहे हैं, और अगर मैं का उपयोग अधिकतम-चौड़ाई और अधिकतम ऊंचाई छवियों, परिणाम नहीं करता है परिवर्तन पर:

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 तय किया है चौड़ाई/ऊंचाई smushed और छवियों अभ्यस्त 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)+'%');; 
    } 
}