Tengo una matriz como:

 let arrVals = [{img:'imgOne.jpg', num:-99}, {img:'imgOne.jpg', num:-500}, {img:'imgTwo.jpg', num:-20}, {img:'imgThree.jpg', num:-33}, {img:'imgFour.jpg', num:-44} ]

Ahora recorro esto y genero imágenes mediante programación a partir de la matriz de objetos que hay dentro:

 <div id="imgContainer"> </div> for (let i = 0; i < arrVals.length; i++) { var img = document.createElement('img'); img.src = arrVals[i].img; img.style.width = `${arrVals[i].num}px`; // appendChild to imgContainer }

Estoy usando los valores negativos de la propiedad de los objetos, arrVals[i].num pero no puedo simplemente convertirlos en números positivos y usarlos como un valor de ancho. Estoy tratando de obtener números positivos con el número positivo más grande correspondiente a - digamos - (-30) y el más pequeño - digamos - correspondiente a (-55)

Necesito usar estos valores para aplicar el ancho de estilo en sus elementos correspondientes. No puedo simplemente convertir estos valores en números positivos y usarlos como el que se supone que es el más pequeño (-500 en este ejemplo) en términos de ancho tendría el ancho más grande. La matriz anterior debería corresponder a estos resultados:

Ancho de CSS de menor a mayor según los valores de la matriz:

 > -500 should corresponds to the smallest width > -99 width is larger than the width given to -500 > -44 width is larger than the width given to -99 > -33 width is larger than the width given to -44 > -20 should have the largest width given its value in the array

¡Cualquier idea sobre cómo lograr esto sería muy apreciada!