What's the math behind CSS's background-size:cover

Question

I\'m creating an \"image generator\" where users can upload an image and add text and/or draw on it. The outputted image is a fixed size (698x450).

On the client side,

Answer 1

When using background-size: cover, it is scaled to the smallest size that covers the entire background.

So, where it is thinner than it is tall, scale it until its width is the same as the area. Where it is taller than it is thin, scale it until its height is the same as the area.

When it is larger than the area to cover, scale it down until it fits (if there is less overflow in height, scale until the same height, if there is less overflow in width, scale until the same width).