Optimizing Picture To Border Ratio With Phi

The other day I was looking at a framed photo in my house and wondering how the area of the border around the picture (called a mat board in the framing industry) compared to the area of the picture itself. Immediately I remembered the master of all aesthetic ratios, the golden ratio, Phi! 1.61803398874989... I thought, "I bet if the ratio of the area of the picture to the border was Phi, it would look good!" So I set off on an algebraic quest to find the answer... The geometry is simple enough. You've got whatever the length and width of your picture is, plus a border around it with a width of x/2.

If we write down the equation for the ratio of the picture area to the border area (the full frame size - the picture's area), we get this:

If we set our ratio to Phi and solve the equation, using the quadratic formula, we get that our doubled border width, x, is:

What does this give us? Now, for any length and width of picture, we can calculate how wide to make the border around it such that the ratio of the area of the picture to the area of the border is Phi...or any number for that matter!

Picture Border Ratio Calculator

Using the calculator below, if you input the length and width of your picture, and the area ratio (picture / border), it will tell you how large to make your border. And below the calculator is a rendering of the values you enter. Note that the default values in the calculator are for a golden rectangle and an area ratio of Phi. Looks pretty nice, doesn't it? Go ahead, try out other picture sizes!

#picInputs { margin-left:auto; margin-right:auto; margin-bottom:15px; width:450px; padding:10px; } #picInputs table { margin-left:auto; margin-right:auto; } #picInputs th { text-align:right; } #picInputs input { margin-left:10px; width:120px; text-align:right; } #picLoadImage { background-color: #ccc; border: 1px outset #333; cursor: pointer; padding:5px; } #picLoadImage:hover { background-color: #eee; } #picLoadImage:active { border: 1px inset #333; }

Picture Length

Picture Width

Area Ratio

Border Width

Or you can use an image from the internet!

Image URL

Use Image