ASPECT RATIO CALCULATOR

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let ratioW = 16;
    let ratioH = 9;
    let lastEdited = 'w';

    const inputW = document.getElementById('input-w');
    const inputH = document.getElementById('input-h');
    const pBox = document.getElementById('p-box');
    const cssOut = document.getElementById('css-output');

    function updateCalculations() {
      const w = parseFloat(inputW.value) || 0;
      const h = parseFloat(inputH.value) || 0;

      if (lastEdited === 'w' && w > 0) {
        inputH.value = Math.round((w * ratioH) / ratioW);
      } else if (lastEdited === 'h' && h > 0) {
        inputW.value = Math.round((h * ratioW) / ratioH);
      }

      const curW = parseInt(inputW.value);
      const curH = parseInt(inputH.value);

      pBox.textContent = `${curW} x ${curH}`;

      // Calculate preview scale inside 240px container
      const maxDim = 200;
      let boxW = maxDim;
      let boxH = Math.round((maxDim * ratioH) / ratioW);

      if (boxH > maxDim) {
        boxH = maxDim;
        boxW = Math.round((maxDim * ratioW) / ratioH);
      }

      pBox.style.width = boxW + 'px';
      pBox.style.height = boxH + 'px';

      cssOut.textContent = `aspect-ratio: ${ratioW} / ${ratioH};\nwidth: ${curW}px;\nheight: ${curH}px;`;
    }

    document.querySelectorAll('.btn-preset').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        ratioW = parseFloat(btn.dataset.w);
        ratioH = parseFloat(btn.dataset.h);
        lastEdited = 'w';
        updateCalculations();
      });
    });

    inputW.addEventListener('input', () => { lastEdited = 'w'; updateCalculations(); });
    inputH.addEventListener('input', () => { lastEdited = 'h'; updateCalculations(); });

    updateCalculations();