Create Aspect Ratio Calculator using HTML CSS and JavaScript (original) (raw)

Last Updated : 23 Jul, 2025

In this article, we are going to implement an aspect ratio calculator. An aspect ratio calculator proves to be a useful tool for individuals seeking to determine the proportions of images or videos based on their width and height. Our aspect ratio calculator has a live preview option that enables users to visualize how adjustments in width and height impact the image's aspect ratio.

**Prerequisites

• **HTML
• **CSS
• **JavaScript

Approach

• The HTML file comprises input fields for width and height, allowing users to define the desired dimensions. Additionally, it includes a drop-down menu offering commonly used aspect ratios and designated areas to display the results.
• CSS styles enhance the visual appeal of the calculator, providing it with a clean and responsive design adorned by a subtle color scheme. The centered container adds to its aesthetic charm, while the input styling contributes to a seamless user experience. Additionally, users can enjoy a visually captivating image preview feature.
• JavaScript takes care of handling input changes, performing calculations for different aspect ratios (diagonal, x:1 format, and w:h format), and dynamically updating the image preview. To enhance user-friendliness, the "Se­t Common Ratio" function automatically fills in inputs with frequently used aspe­ct ratios.

E**xample

HTML `

    <label for="width">Width:</label>
    <input type="number"
        id="width"
        placeholder="Enter width"
        oninput="calculateAspectRatio()">
    <br>

    <label for="height">Height:</label>
    <input type="number"
        id="height"
        placeholder="Enter height"
        oninput="calculateAspectRatio()">
    <br>

    <label for="commonRatios">Select Common Ratio:</label>
    <select id="commonRatios" onchange="setCommonRatio()">
        <option value="16:9">
            16:9 (1920x1080)
        </option>
        <option value="5:4">
            5:4 (1280x1024)
        </option>
        <option value="4:3">
            4:3 (1024x768)
        </option>
        <option value="3:2">
            3:2 (1440x960)
        </option>
        <option value="8K">
            8K (7680x4320)
        </option>
        <option value="5K">
            5K (5120x2880)
        </option>
        <option value="4K">
            4K (3840x2160)
        </option>
        <option value="Retina">
            IPad with Retina (2048x1536)
        </option>
        <option value="iPhone6plus">
            IPhone 6 Plus (1920x1080)
        </option>
        <option value="iPhone6">
            IPhone 6 (1334x750)
        </option>
        <option value="iPhone5">
            IPhone 5 (1136x640)
        </option>
        <option value="iPad">
            IPad (1024x768)
        </option>
        <option value="Twitter">
            Twitter (1024x512)
        </option>
        <option value="WebBanner">
            Common Web Banner (728x90)
        </option>
        <option value="VGA">
            VGA (640x480)
        </option>
        <option value="HVGA">
            HVGA (320x480)
        </option>
    </select>
    <br>

    <button onclick="calculateAspect()">Calculate</button>

    <p class="result" id="result1">
        Diagonal: 
    </p>
    <p class="result" id="result2">
        Aspect Ratio (x:1 format): 
    </p>
    <p class="result" id="result3">
        Aspect Ratio (w:h format): 
    </p>

    <div id="imageContainer">
        <img id="previewImage"
            src=

<script src="script.js"></script>

CSS

/Style.css/ body { font-family: Arial, sans-serif; background-color: #f5f5f5; text-align: center; } .container { max-width: 700px; margin: 20px auto; background-color: #ffffff; padding: 40px; border-radius: 15px; box-shadow: 0 2px 14px 0px rgba(0, 0, 0, 0.1); } h1 { font-size: 24px; margin-bottom: 20px; } span { color: #007bff; } label { display: block; font-weight: bold; margin-top: 10px; } input, select { width: 90%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; } select { height: 50px; } button { width: 20%; background-color: #007bff; color: #fff; padding: 10px; border: none; border-radius: 5px; font-size: 16px; margin-top: 20px; cursor: pointer; } button:hover { background-color: #0056b3; } .result { font-weight: bold; margin-top: 20px; } .image-container { background-color: white; display: inline-block; max-width: 100%; margin-top: 20px; } img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 2px 24px 0px grey; }

` JavaScript ``

// Script.js const calculateAspectRatio = () => { const widthInput = document.getElementById("width"); const heightInput = document.getElementById("height"); const width = parseFloat(widthInput.value); const height = parseFloat(heightInput.value);

if (!isNaN(width) &&
    !isNaN(height)) {
    const diagonal = Math.sqrt(
        width ** 2 + height ** 2
    ).toFixed(2);
    document.getElementById("result1")
        .textContent = "Diagonal = " + diagonal;

    const x = (
        width / height
    ).toFixed(2);
    document.getElementById(
        "result2"
    ).textContent =
        "Aspect Ratio (x:1 format) = " +
        x +
        " : 1";

    const gcd = (a, b) => {
        while (b) {
            a %= b;
            [a, b] = [b, a];
        }
        return a;
    };

    const gcdValue = gcd(
        width,
        height);
    const w = width / gcdValue;
    const h = height / gcdValue;
    document.getElementById(
        "result3"
    ).textContent =
        "Aspect Ratio (w:h format) = " +
        w +
        " : " +
        h;

    // Apply aspect ratio to the preview image
    const imageElement =
        document.getElementById(
            "previewImage"
        );
    imageElement.style.width = `${width}px`;
    imageElement.style.height = `${height}px`;
}
else {

    // Clear results and reset image on invalid input
    document.getElementById(
        "result1"
    ).textContent = "Diagonal: ";
    document.getElementById(
        "result2"
    ).textContent =
        "Aspect Ratio (x:1 format): ";
    document.getElementById(
        "result3"
    ).textContent =
        "Aspect Ratio (w:h format): ";

    const imageElement =
        document.getElementById(
            "previewImage"
        );
    imageElement.style.width =
        "auto";
    imageElement.style.height =
        "auto";
}

}

const setCommonRati = () => { const commonRatios = { "16:9": [1920, 1080], "5:4": [1280, 1024], "4:3": [1024, 768], "3:2": [1440, 960], "8K": [7680, 4320], "5K": [5120, 2880], "4K": [3840, 2160], Retina: [2048, 1536], iPhone6plus: [1920, 1080], iPhone6: [1334, 750], iPhone5: [1136, 640], iPad: [1024, 768], Twitter: [1024, 512], WebBanner: [728, 90], VGA: [640, 480], HVGA: [320, 480], }; const selectedRatio = document.getElementById( "commonRatios" ).value; const [width, height] = commonRatios[selectedRatio]; document.getElementById( "width" ).value = width; document.getElementById( "height" ).value = height;

// Update the results and preview 
// for the selected common ratio
calculateAspectRatio();

}

// Initialize the image aspect ratio // based on the placeholder image calculateAspectRatio();

``

**Output

Create Aspect Ratio Calculator using HTML CSS and JavaScript