Wie werden nur so viele Bilder innerhalb eines Div angezeigt, wie Platz für sie ist?

Question

Ich habe ein leeres div-Element wie folgt aus:

<div class="mydiv"></div> 

jetzt mein Produkt Besitzer will dies mit Bildern füllen div bis kein Platz mehr (in vertikaler Richtung) links ist:

<div class="mydiv"> 
    <img src="pic1.jpg"> 
    <img src="pic2.jpg"> 
    <img src="pic3.jpg"> 
    <img src="pic4.jpg"> 
    <!-- keep going until mydiv is full --> 
</div> 

Leider Die Größe dieses div-Elements ist unbekannt, bis die Seite tatsächlich geladen wird, da es sich um eine responsive Website handelt und somit die Größe des div-Elements dynamisch an die Größe des Bildschirms/Browserfensters angepasst wird. Wir wissen aber die Größe der Bilder.

Gibt es dafür eine reine HTML/CSS-Lösung?

Die einzige Möglichkeit, die ich mir vorstellen kann, ist die Breite + Höhe des Div während der Laufzeit über JavaScript zu überprüfen und dann die Mathematik zu tun, um zu sehen, wie viele Bilder werden wahrscheinlich dort hinein passen und dann nur die Bilder wahrscheinlich einfügen gehen in

Answer 1

Ok, so gibt es einen Weg, es zu benutzen mit „Hacks“.

ich einen ersten Behälter gefertigt, die mit Ihnen definiert.

gesetzt overflow:hidden zu diesem Container

Dann machte ich einen anderen Behälter innerhalb die erste, aber mit größerer Breite

in diesem Container werden alle Bilder setzen (funktioniert vertikal und horizontal, fügen float:left zu meinem Beispiel machen es

Here is the example

Sie sehen horizontal) arbeiten, dass ich 4 aus Bilder (gefälscht sie mit fixen Position divs) und wir können 2,5 von ihnen wegen der Containerbreite sehen.

Hoffnung dieser Trick ist, was Sie für :)

Answer 2

Dies ist meine Lösung in Javascript suchen:

var mydiv = document.getElementById('mydiv') // or by class not important 
while(!(mydiv .offsetHeight < mydiv .scrollHeight 
    || mydiv .offsetWidth < mydiv .scrollWidth)) { 
    mydiv.innerHTML = mydiv.innerHTML + '<img src="myimg.jpg" />; 
}