Embed the AspectCalc Calculator on Your Website

A calculator answers the question your readers already have. Instead of sending them away to work out a ratio, they do it right where they are reading - and the widget asks nothing of you in return.

• Free and lightweight. One small iframe, no script to host, no dependency to maintain.
• No ads on your pages. The embed stays clean; the only addition is a short credit line linking back to AspectCalc.
• Answers the question on the page. Instead of sending readers away to calculate a ratio, they do it right where they are reading.
• Predictable height. The frame is sized up front, so your layout never shifts. Keep the optional script in the snippet if you would rather the frame track the widget's real height.
• Works on mobile. The widget is built responsive, so it stays usable at the narrow widths of a phone column.
• Accessible. Inputs are labelled and the result is announced to screen readers, the same as on this site.

1. Copy the snippet below.
2. Paste it into the HTML of any page or post where you want the calculator to appear.
3. Save and view. The calculator loads immediately - no setup, no account.

Copy this snippet:

<div class="aspectcalc-embed" style="max-width:100%">
  <iframe id="aspectcalc-frame" src="https://aspectcalc.com/embed?h=640"
          width="100%" height="700" style="border:0;border-radius:12px"
          loading="lazy" title="AspectCalc aspect ratio calculator"></iframe>
  <p style="margin:8px 0 0;font:13px/1.4 system-ui,sans-serif;color:#64748b;text-align:center">Powered by <a href="https://aspectcalc.com/" style="color:#2563eb;text-decoration:none">AspectCalc</a> - free aspect ratio calculator</p>
</div>
<script>
  // Optional: grow the frame to the widget's real height.
  // Delete this whole block to keep a fixed-height frame instead.
  addEventListener('message', function (e) {
    if (e.origin !== 'https://aspectcalc.com') return;
    if (!e.data || e.data.type !== 'aspectcalc-height') return;
    var f = document.getElementById('aspectcalc-frame');
    if (f) f.style.height = e.data.height + 'px';
  });
</script>

Copy code

Prefer to see it first? Open the live embed demo.

The snippet's frame starts at height="700" with ?h=640 in the source. ?h= caps the widget's own scroll area in pixels; the frame height is the space your page reserves for it. Change ?h= to make the widget shorter or taller - for example https://aspectcalc.com/embed?h=520. Width is controlled by your own CSS (the snippet uses width="100%" so it fills its container).

Optional: exact-fit height. The snippet ends with a small script that listens for the widget's aspectcalc-height message (after checking the message comes from https://aspectcalc.com) and sets the frame to the exact height. Keep it if you want the frame to always fit with no inner scrollbar; delete it if you would rather pin one fixed height and never have the frame move.

If you want a different look, wrap the iframe in a <div> and style that wrapper - rounded corners, a border, a max-width, anything that fits your page. The widget inside keeps working regardless of how you present the frame around it.

• Live embed demo
• Aspect Ratio Converter
• Screen Ratio Calculator

The aspect ratio calculator names the shape any size already is, and the common ratios table lists every standard ratio on one page.