Figure div

[Cleofas]

My brain is freezing. I get the size of div'a. $('.template').height() And I'm doing it. (temph) / 150(150 is the size of the picture).But the size of the picture is 50 percent and it can change its size.♪

How do I get the size of the first picture? and template Share pictures.

It should be about: (temph) / imgsize Even if the picture changes the size♪

$(window).load(function() {
 var temph = $('.template').height();
 var res = (temph) / 150;
 var result = res.toFixed();
var theImages = ["http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg","http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg","http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg"];
for (var i = 1; i <= result; i++) {
var item = theImages[Math.floor(Math.random()*theImages.length)];

$('.template').append('<img src='+item+'><br>').hide().fadeIn(800);
}

});
</script>";

.template

{

background-color:green;

width:100%;

height:1000px;

}

.template img

{

width:50%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="template"></div>

[authera]

The size of the image can be obtained after download, with the event onload, and the height of the element only after implementation

template = $('.template');
images = [

"http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg",

"http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg",

"http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg"

];
(function put(v) {

item = images[Math.floor(Math.random()*images.length)];
image(new Image());
function image(img) {

img.src = item;

img.onload = function() {

template.append(img, '<br>');

v += img.offsetHeight;

console.log(template.height(), v);

if(template.height() > v) { put(v); } else { img.remove(); }

}

}

})(0);

.template {

background-color: green;

width: 100%;

height: 1000px;

}

.template img { width: 50%; }

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<div class="template"></div>