As stated in title.
Width is dynamic, hence the calculation :p
The tricky part is that width can not be on the right side of the divide sign (\), as defined by the css calc() syntax.
I haven't thought about how I want the height to decrease. But let's say for example:
when wdith is 200px, height is 50px
when width is 100px, height is 100px
when width is 50px, height is 200px
and so on…
and height should not become a negative number.
the example given above was inaccurate. It got me a close enough answer, but I'm hoping for a better one.
I apologize for the mistake. Here's another example:
My box is 1540 width * 650 height
when width decrease by 10px, height increases by 19px. Until width is 0.
when width increase by 10px, height decreases by 19px. negative height allowed. and I will handle the negative height on the CSS side.
in calc() you can use plus, minus, multiply and divide, and parenthesis.
Thank you.
I posted it here because I know how to use css, but I can't do the math. :p
Edit:
Problem solved. Thanks.
I can't upvote, sorry.
Best Answer
\begin{align} \mathrm{height} - 650 &= (\mathrm{width} - 1540) \times \frac{-19}{10} \\ \mathrm{height} - 650 &= (-1.9\times\mathrm{width}) + (1.9\times 1540) \\ \mathrm{height} - 650 &= 2926-1.9\times\mathrm{width} \\ \mathrm{height} &= 2926+650-1.9\times\mathrm{width} \\ \mathrm{height} &= 3576-1.9\times \mathrm{width} \end{align}