Displaying pictures by div size

Question

My brain is cold) I get the size of the div $('.template').height() and divide it by (temph) / 150 (150 is the size of the image.). But the size of the picture is specified in the form of 50% and it can change its size .

How do I get the size of the first image displayed? and template divided by the size of the picture.

It should be approximately like this: (temph) / imgsize in the end for will scroll right even if the picture changes 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>

My magic ball suggests that the height of the diva contains a value before downloading pictures
DIV is set in 1k px in height, is it the way it should be and you need to put as many pictures in it as you like?
The main question is to get the size of the first image displayed. It is correct in view. It has a size in percent and needs to be obtained in pixels.
@ Doofy, yes, everything should be correctly placed as much as the picture fits. But it should work on small screens and on large ones. That is Responsive

Accepted Answer · 2016-07-19T18:58:22

You can get the size of the image after loading, using the onload event, and the height of the element only after insertion into the document

 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>

This is the real size of the picture you need to get what we see with your eyes. That is: image.prntscr.com/image/8cc68a8d2fac41edbd22cb05dbcf9c2d.png
Another such joke in the logs is writing 1 time. 184 is the correct size. What I need. Another time, 1440 is the real size of the picture.
@Sauron, this is because of fadeIn, some do not have time to infiltrate the DOM
Removed the fadein everything exactly the same. Removed the fadein everything exactly the same.

Displaying pictures by div size

1 answer 1

More articles: