Aspect Ratio Calculator

Aspect Ratio Calculator

by Tiago Boeing

HTML

<!doctype html public >
<html>
    <head>
        <meta charset="UTF-8">
        <title>Aspect Ratio Calculator (ARC)</title>
        <meta name="keywords" content="video, widescreen, screen, resolution, monitor, tv, aspect ratio, calculator, pixels, dimensions, ratios, preserve aspect ratio, fraction scaling calculator, fraction scaling, fractions">
        <meta name="description" content="Calculate the missing value for a particular aspect ratio.">
        <link rel="canonical" href="http://andrew.hedges.name/experiments/aspect_ratio/">
        <link rel="stylesheet" href="/experiments/-/styles.css">
        <style type="text/css">
        p {
            margin: 1em 0;
        }
        #arc td {
            padding: 0.5em;
        }
        ul {
            list-style: none;
        }
        ul ul li {
            display: inline-block;
            margin-bottom: 10px;
        }
        #arc {
            margin: 0;
            padding: 0;
        }
        #arc input {
            padding: 0.5em;
            border: solid 1px black;
            background: rgb(255, 255, 255);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
        }
        #arc input:focus {
            background: rgb(205, 255, 205) !important;
        }
        #ratio {
            font-weight: bold;
        }
        #visual-ratio {
            position: relative;
            background: white;
            border: solid 1px black;
            width: 200px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            margin: 1em 0;
            padding: 0;
            overflow: hidden;
        }
        #visual-ratio img {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 150px;
        }
        #valley-of-the-kings {
            background: #e0e0e0;
            float: left;
            width: 450px;
            padding: 0 1em;
            margin:...