Design Atlas
한국어
◧ Film & photo

Film aspect ratios

영화 화면비

The frame's width-to-height ratio. Standards differ by era and genre — 1.33 (Academy), 1.85 (flat), 2.39 (scope).

Also known as: LetterboxWidescreen ratios1.33 / 1.85 / 2.39
···
html
<div class="screen">
  <div class="pic"></div>
  <div class="bar top" id="bt"></div>
  <div class="bar bottom" id="bb"></div>
  <div class="bar left" id="bl"></div>
  <div class="bar right" id="br"></div>
  <span class="label" id="lb">1.33 · Academy</span>
</div>
css
.screen{position:relative;width:min(94%,520px);aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:4px}
.pic{position:absolute;inset:0;background:
  linear-gradient(90deg,#5b5bf7 0 20%,#ff5c8a 20% 40%,#ffb648 40% 60%,#18c29c 60% 80%,#2b2f45 80% 100%)}
.bar{position:absolute;background:#000;transition:all 1s cubic-bezier(.4,0,.2,1)}
.top,.bottom{left:0;right:0;height:0}
.top{top:0}
.bottom{bottom:0}
.left,.right{top:0;bottom:0;width:0}
.left{left:0}
.right{right:0}
.label{position:absolute;left:4%;bottom:4%;font:700 11px ui-monospace,monospace;color:#fff;
  background:rgba(0,0,0,.4);padding:3px 8px;border-radius:20px;z-index:2}
js
const bt=document.getElementById('bt'), bb=document.getElementById('bb');
const bl=document.getElementById('bl'), br=document.getElementById('br');
const lb=document.getElementById('lb');
const states=[
  { top:'0%', bottom:'0%', left:'12.6%', right:'12.6%', label:'1.33 · Academy' },
  { top:'1.95%', bottom:'1.95%', left:'0%', right:'0%', label:'1.85 · Flat' },
  { top:'12.8%', bottom:'12.8%', left:'0%', right:'0%', label:'2.39 · Scope' },
];
let i=0;
function step(){
  const s=states[i];
  bt.style.height=s.top; bb.style.height=s.bottom;
  bl.style.width=s.left; br.style.width=s.right;
  lb.textContent=s.label;
  i=(i+1)%states.length;
}
step();
setInterval(step,1900);

1.33:1 (4:3) was the "Academy ratio" standard from the early sound era. When 1950s television started pulling audiences away, theaters differentiated with wider frames — settling into today's two theatrical standards: 1.85:1 ("flat") and 2.39:1 ("scope," short for CinemaScope).

To shoot the narrower 2.39 on the same sensor, you either crop the top and bottom or use an anamorphic lens that squeezes the image horizontally during capture and unsqueezes it on projection. That's why a 2.39 film shows black bars on a 16:9 TV — the frame isn't being cropped, it was simply shot at that ratio to begin with.

The ratio itself becomes a directorial choice. Wide, narrow 2.39 suits sweeping landscapes or lining up several characters in one row; 1.85 tends to feel more balanced for close-ups. Some films — Wes Anderson's The Grand Budapest Hotel among them — switch aspect ratio itself to mark different time periods.

When to use

Pick the aspect ratio early, to match the genre and mood you're after. In a web player, compute the letterbox or pillarbox bars from the actual content ratio so the black bars don't look like a bug.