Preserve aspect ratio for images

I'm currently working on a website where I have images of random sizes. They all need to be responsive and be placed within a solid container that will maintain the aspect ratio of the image it contains. This can be done with the padding-top: x% and position:relative on parent element while the child (image) has position: absolute and top:0; left:0; right:0; bottom:0
So I found needed a way to calculate image radio based on dimensions. In my project I use chakra UI so, the radio has the form of a/b Let's look into it:

I'm using a API based CMS where I need to convert radios from strings into a/b format (not string)

// Transforms 'a/b' string into a/b export const parseRatio = (prop: string) => { let newRatio = prop.split('/'), first = Number(newRatio[0]), second = Number(newRatio[1]) return first / second } 

Next I found this neat little function that calculates my ratio based on image dimensions (that I can query from the API)

// compute ratio based on dimensions export const ratioCalc = (w:number, h:number) => { let gcd :any = (a:number, b:number) => (b == 0) ? a : gcd (b, a%b), ratio = gcd(w, h), left = w/ratio, right = h/ratio return parseRatio(left + '/' + right) } 

Let me know what you think.