Dynamic image size to fill fixed size div - Javascript/CSS

Question

I am javascript/css experienced developer, just need some calculation input from you in the right way to complete my requirement.

I am working with CSS and JavaScript, and i wanted to fill a div with multiple round shape images,

My requirement is if I have a div with height of 400px and width of 200px and assume that I have 16 round images ( there is no any fix number of images just the height and width of div is fixed ), then I want to fill all the image in the div that it looks like filled fixed size div.

I need a flow to create image size dynamic as per the height and width of div, make sure that I don't want any plugin to do this.

Calculation should be like (for eg,)

400px * 200px and 16 images (assume)

then the image size will be 50x50

and setting 8 images in first row and 8 in second row, and the setting padding top and bottom 25px of upper row and bottom row will adjust all 16 images and fill the box of 400x200 size.

Please guide me on right way

Answer 1

You can use the following logic:

var wd = parent.clientWidth, he=parent.clientHeight,totalImages=16,url='';
var size = Math.sqrt(wd*he/totalImages);
var di = "<div style='width:"+size +"px; height:"+size +"px; display:flex; align-items:center; justify-content:center;'><img src='"+url+"'></div>"
parent.append(di);