1

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.

BigName
  • 123
  • 1
    Please be more specific about how you want height to decrease. (I suppose you are not looking for height = constant - width, even though that satisfies the literal wording of your question!) Also, specify exactly what operations you can perform in the syntax of CSS calc(). This is not StackOverflow, where you could assume there are many people who know CSS that well. – David K Mar 17 '15 at 19:27

2 Answers2

0

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.

alexweav
  • 93
  • The problem is if width 251, then height is -1. If I set the constant too high, the width and height will be out of proportion. I'll wait a bit to see if there is a better answer. But yours can work. And I'll use it if nothing else comes up. Thanks for the input. – BigName Mar 17 '15 at 19:51
  • I just provided an edit that shows how you can fix that. Simply set the maximum width to a value lower than your constant, say 200. This limits the window's ability to move and it will display the behavior you want and stay in proportion. – alexweav Mar 17 '15 at 19:54
  • max-width: 200px; min-width: 50; This will keep the proportions in check. You can adjust the numbers accordingly depending on the maximum deformation you want. – alexweav Mar 17 '15 at 19:56
  • Yes. After some thought, I agree with your answer. But let's just see if there is a better one. :p Though I doubt there will be. – BigName Mar 17 '15 at 19:57
0

\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}

kennytm
  • 7,495