JSFiddle - React, Tailwind, and code Playground

JavaScript

var viewport = {
	width: 'undefined',
	height: 'undefined',
	ratio: 1.6
};

var bg_1280x720 = {
	name: 'RZ_BG_1280x720_16-9.png',
	width: '1280',
	height: '720',
  ratio: 1.7
};

var bg_1920x1080 = {
	name: 'RZ_BG_1280x720_16-9.png',
	width: '1280',
	height: '720',
  ratio: 1.7
};

var bg_2000x2000 = {
	name: 'RZ_BG_2000x2000_1-1.png',
	width: '2000',
	height: '2000',
  ratio: 1
};

bgOverlays = [
bg_1280x720,
bg_1920x1080,
bg_2000x2000
]

// I need a script, that looks at: "viewport.ratio" and then looks at the ".ratio: values" of all the objects in: "bgOverlays" and then creates a new array that has only the objects in it, that are closest to: "viewport.ratio", in terms of their: ".ratio: value".

// example:
// viewport.ratio = 1.1		output: newArray[bg_2000x2000]
// viewport.ratio = 2			output: newArray[bg_1280x720, bg_1920x1080]