How to calculate so that when width increases, height will decrease

1.6k Views Asked by At

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.

2

There are 2 best solutions below

0
On 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}

4
On

var height = 250 - width;

Or some other constant you specify.

For this case, when width is 200, height is 50, when width is 125 height is 125, when width is 50, height is 200.

You may use another constant there to change the element size to your liking, try a few out!

I used javascript in the example case that I provided as I am not familiar with the css function you listed, but the same principle holds.

In order to ensure that height is never negative, simply force the maximum width of the element to be 250 (or your chosen constant) with css.