Evenly distributing elements across window after css scale

JavaScript
1

Based on n items being shown, I’m wanting to evenly distribute them across a width after scaling.

Here’s what I have so far


var window_width = window.innerWidth;
var section_width = parseInt(window_width/asset_windows.length);
var scale = 1;

for (i=0; i < asset_windows.length; i++) {

	var asset_window_width = asset_windows[i].clientWidth;

	if ( asset_window_width > section_width ) {
		// scale asset to section_width
		var scale = section_width/asset_window_width;					
	}

	var centering_offset = ((section_width - asset_window_width)/2)*scale;

	var x_positioning = section_width * i - asset_windows[i].offsetLeft;

	document.getElementById('scheme_application_container').style.overflow = "hidden";
	document.body.style.overflow = "hidden";

	$(asset_windows[i])
	 .css({transformOrigin:'0 0'})
	 .transition({
		scale: scale,
		x: x_positioning
	});

}

This works as expected until I scale the elements to fit into divided area. Maybe I’ve been banging my head at this for too long, but I’m stumped.

I thought I had it by also adding the below to the x_positioning value:


(section_width * i)*scale

but wasn’t consistent.

ANY help/hint/helpful push is MOST appreciated.