Aspect Ratio Box

Container preserving a fixed width-to-height ratio.

16 / 9

html

<div class="ar-box" style="aspect-ratio:16 / 9;border-radius:12px;">
  <img class="ar-box__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23BFD9F2'/%3E%3Ccircle cx='200' cy='150' r='70' fill='%23A8E6C1'/%3E%3Cpath d='M0 220 L120 140 L220 210 L320 120 L400 190 L400 300 L0 300 Z' fill='%23D9C8F0'/%3E%3C/svg%3E" style="object-fit:cover;" alt="" loading="lazy" width="400" height="300" />
  
  <span class="ar-box__badge">16 / 9</span>
  
</div>
<style>
.ar-box { position: relative; width: 100%; max-width: 360px; overflow: hidden; background: #FAF7F2; border: 1px solid #24143022; }
.ar-box__img { display: block; width: 100%; height: 100%; }
.ar-box__badge { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: #241430cc; color: #FAF7F2; font: 600 12px/1.4 system-ui, sans-serif; }
</style>

tailwind

<div class="ar-box-tw relative w-full max-w-[360px] overflow-hidden bg-[#FAF7F2] border border-[#24143022]" style="aspect-ratio:16 / 9;border-radius:12px;">
  <img class="block w-full h-full" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23BFD9F2'/%3E%3Ccircle cx='200' cy='150' r='70' fill='%23A8E6C1'/%3E%3Cpath d='M0 220 L120 140 L220 210 L320 120 L400 190 L400 300 L0 300 Z' fill='%23D9C8F0'/%3E%3C/svg%3E" style="object-fit:cover;" alt="" loading="lazy" width="400" height="300" />
  
  <span class="absolute right-2 bottom-2 px-2 py-1 rounded-md text-xs font-semibold text-[#FAF7F2]" style="background:#241430cc;">16 / 9</span>
  
</div>

react

export function AspectRatioBox({
  ratio = "16 / 9",
  fit = "cover",
  radius = 12,
  label = true,
}) {
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 360, overflow: "hidden",
      background: "#FAF7F2", border: "1px solid #24143022", aspectRatio: ratio, borderRadius: radius }}>
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23BFD9F2'/%3E%3Ccircle cx='200' cy='150' r='70' fill='%23A8E6C1'/%3E%3Cpath d='M0 220 L120 140 L220 210 L320 120 L400 190 L400 300 L0 300 Z' fill='%23D9C8F0'/%3E%3C/svg%3E"
        alt=""
        loading="lazy"
        width={400}
        height={300}
        style={{ display: "block", width: "100%", height: "100%", objectFit: fit }}
      />
      {label && (
        <span style={{ position: "absolute", right: 8, bottom: 8, padding: "3px 8px", borderRadius: 6,
          background: "#241430cc", color: "#FAF7F2", font: "600 12px/1.4 system-ui, sans-serif" }}>
          {ratio}
        </span>
      )}
    </div>
  );
}