Frage img verschiebt div

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
31 Oktober 2019
62
1
8
19
hallo
ich habe mir mittels JavaScript ein Grid Raster erstellt
heute habe ich versuch ein img reinzuladen das klappt auch aber das div wo das img reingeladen wird vergrößert sich dann fast um das doppelte ich habe über die Browser Konsole geschaut aber das div hat kein padding und das img hat kein margin und ich habe keine Ahnung voran das liegt habt ihr vielleicht ideen

Hier noch ein paar Schnipsel code:

HTML:
    <div id="desktop">
       <div id="grid-haupt">

       </div>
    </div>
CSS:
#desktop > #grid-haupt {
    position: inherit;
    display: grid;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: lawngreen;
}

#desktop > #grid-haupt > .grid-item {
    border: 1px solid black;
    margin: 0;
    float: left;
}

#desktop > #grid-haupt > .grid-item > .CKS-Desktop-img {
    height: 50%;
    width: auto;
    margin: 0px;
    padding: 0px;
}
JavaScript:
    var div = String;
    var gridHaupt = document.getElementById("grid-haupt");
    var idX = 1;
    var idY = 1;
    var td = 10;
    var tr = 10;

    for (i = 0; i < tr; i++) {
        for (a = 0; a < td; a++) {
            div = document.createElement("div");
            div.setAttribute("class", "grid-item");
            div.setAttribute("id", idY + ":" + idX);
            div.setAttribute("ondrop", "drop(event)");
            div.setAttribute("ondragover", "allowDrop(event)");
            gridHaupt.appendChild(div);
            idX++;
        }
        idY++;
        idX = 1;

    var xml = new XMLHttpRequest();
    var count = 0;
    xml.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // Typical action to be performed when the document is ready:
            var list = xml.responseText;
            list = "[" + list + "]";
            for(i = 0; i < list.length; i++) {
                if (list[i]=="{") {
                    count++
                }
            }
            programList = eval(list);
            for(i = 0; i < count; i++) {
                var img = document.createElement("img");
                var position = document.getElementById(programList[i]["posi"]);
                img.setAttribute("class","CKS-Desktop-img");
                img.setAttribute("src","./C/Program/"+programList[i]["icon"]);
                img.setAttribute("id",programList[i]["id"]);
                img.setAttribute("draggable","true");
                img.setAttribute("ondragstart","drag(event)");
                position.appendChild(img);  
            }
            console.log(count)
            console.log(programList);
        
        }
    };
    xml.open("GET", "./Programlist.CKS-Info", true);
    xml.send();



    }
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.615
314
83
67
Ohne weitere Maßnahmen wird das Bild so groß dargestellt, wie es seiner natürlichen Größe entspricht. Mit width: 100%; und height: auto; kannst Du erreichen, dass sich die Breite an die des Containers anpasst und die Höhe sich entsprechend dem Seitenverhältnis einstellt.
 
Werbung: