Create Aspect Ratio Calculator using HTML CSS and JavaScript

Last Updated : 01 Nov, 2023

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.

Create-a-Aspect-Ratio-Calculator-Using-HTML-CSS-and-JavaScript

Prerequisites

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 “Set Common Ratio” function automatically fills in inputs with frequently used aspect ratios.

Example

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();

HTML

<!--Index.html-->
<!DOCTYPE html>
<html>
 
<head>
    <title>
          Aspect Ratio Calculator 
        with Live Image Preview
      </title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="container">
        <h1>Aspect Ratio Calculator with 
          <span>Live Preview </span> 
        </h1>
 
        <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=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png"
                alt="Preview Image">
        </div>
    </div>
 
    <script src="script.js"></script>
</body>
 
</html>

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