aspect-ratio vs the padding-bottom hack — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 aspect-ratio vs the padding-bottom hack</h1>
    <p class="pg-sub">
      Three small experiments: prove the new property matches the old hack pixel-for-pixel,
      see the squish it doesn't warn you about, then watch it stop a real layout jump.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Same ratio, two techniques</div>
      <div class="seg" role="group" aria-label="Aspect ratio" id="ratioSeg">
        <button data-ratio="16/9" aria-pressed="true">16 / 9</button>
        <button data-ratio="4/3" aria-pressed="false">4 / 3</button>
        <button data-ratio="1/1" aria-pressed="false">1 / 1</button>
        <button data-ratio="21/9" aria-pressed="false">21 / 9</button>
      </div>
      <div class="pair" style="margin-top:14px">
        <div>
          <p class="hint" style="margin-top:0">Old — padding-top hack</p>
          <div class="ratio-old" id="oldBox">
            <div class="fill box" id="oldFill">16:9</div>
          </div>
        </div>
        <div>
          <p class="hint" style="margin-top:0">New — aspect-ratio</p>
          <div class="box" id="newBox" style="width:100%">16:9</div>
        </div>
      </div>
      <div class="code" style="margin-top:14px" id="codeOut"></div>
      <p class="hint" id="ratioHint">Drag through the ratios — the two boxes stay pixel-identical the whole time. One needs a wrapper and a percentage; the other needs one property.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The gotcha: aspect-ratio doesn't crop</div>
      <div class="btn-row">
        <label class="toggle">
          <input type="checkbox" id="objectFit" />
          <span class="switch"></span>
          <span>object-fit: cover</span>
        </label>
      </div>
      <div class="photo-frame" style="margin-top:14px">
        <img id="photoImg" alt="A synthetic portrait-oriented photo placeholder — a circle head over a body block, labelled PORTRAIT" class="contain-fit"
          src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='400'%20viewBox='0%200%20300%20400'%3E%3Crect%20width='300'%20height='400'%20fill='%231c2333'/%3E%3Ccircle%20cx='150'%20cy='150'%20r='90'%20fill='%237c9cff'/%3E%3Crect%20y='260'%20width='300'%20height='140'%20fill='%232a3350'/%3E%3Ctext%20x='150'%20y='335'%20font-family='monospace'%20font-size='24'%20fill='%23e8ecf6'%20text-anchor='middle'%3EPORTRAIT%3C/text%3E%3C/svg%3E" />
      </div>
      <div class="status" id="fitStatus" style="margin-top:12px">
        <span class="dot warn" id="fitDot"></span><span id="fitStatusText">Off — the source photo is 3:4 portrait, forced into a 16:9 box. Watch the circle turn into an oval.</span>
      </div>
      <p class="hint">The photo's real shape never changes size on disk — only how its pixels are mapped into the box you gave it.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Bonus: it also stops the page from jumping</div>
      <div class="btn-row">
        <button class="btn primary" id="simulate">Simulate a slow image load</button>
        <button class="btn ghost" id="resetCls">Reset</button>
      </div>
      <div class="cls-row" style="margin-top:14px">
        <div>
          <p class="hint" style="margin-top:0">No aspect-ratio reserved</p>
          <div class="cls-box" id="noRatioBox"><div class="placeholder" id="noRatioPh">no height yet…</div></div>
          <p class="hint">Content below this box jumps down the instant the image appears.</p>
        </div>
        <div>
          <p class="hint" style="margin-top:0">aspect-ratio: 16 / 9 reserved</p>
          <div class="cls-box reserved" id="ratioBox"><div class="placeholder" id="ratioPh">loading…</div></div>
          <p class="hint">The box already has its final height. The image fades into space that was always there.</p>
        </div>
      </div>
      <div class="status" id="clsStatus" style="margin-top:12px">
        <span class="dot info" id="clsDot"></span><span id="clsStatusText">Ready — click simulate to watch both boxes receive the same image.</span>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.