Question

I have made a script: http://jsfiddle.net/radar24/XZgh4/ which scales the given dimension into the outer div. everything seems fine, until I enter a dimension such as 200 x 99. then the box grows outside.

I really cannot find the cause of this, can anyone help?

Answer 1

The problem is that you’re not restricting your proportions along both axes. Your box has a height:width proportion of 5:3. If you don’t restrict along both axes, you can have bleeding outside of the boxes. An example might show this best.

Take the case of the height being the bigger of the two dimensions. Your code is only restricting it along the 500px axis. Consequently, if we throw a box in there with 5: >3 proportions, you get a creeping edge.

For instance, put “3” and “5” in your boxes. Fits perfectly. Now make it 3.1 and 5. Ruh roh.

You’ll need to add another if statement in each section that THEN determines if the dimension ratio goes outside this boundary. In the above case, you’ll need to make it so that the height of the 5:3.1 is not 500px, but rather, the height (less than 500px) that would make 3.1 to be equal to 300px. That would be 483px.

Does that makes sense?

If not, I’ll try to rephrase again:

Put another set of if statements in the two if statements you already have. These check if, upon setting the LARGER dimension, it makes the SMALLER dimension go outside the bounds of the box in that direction.
in pseudocode

if (height > width)
    calculate the height
    calculate the width
    if (width > div.width)
       width = div.width
       height = div.width * aspect;

Just ask me if this isn’t clear enough!

Edit: Here’s a JSFiddle that gets it right. You’ll need to add further code if you want a white border along each edge.

Edit2: Here’s the white border come back!

Edit3: You can also try prettying it up and using just aspects to do this. I did the first one for you. Three to go!