Skip to content
1440px

5:3 Aspect Ratio

Exact 5:3 resolutions, the CSS you need, and where the ratio actually shows up.

Super 16 · landscape
5:3 = 1.6667

Smallest whole-pixel size 5 × 3. In CSS: aspect-ratio: 5 / 3. Rotated it becomes 3:5.

Where 5:3 is used

Super 16 film, some ultrawide phone panels.

A film-native ratio rarely seen on consumer displays.

5:3

Rendered live with aspect-ratio: 5 / 3.

5:3 resolutions

Every size below is exactly 5:3 — no rounding. Sizes marked as a standard are named display resolutions.

Exact 5:3 pixel dimensions
ResolutionWidthHeightMegapixelsStandard
160 × 96160960.02—
165 × 99165990.02—
170 × 1021701020.02—
175 × 1051751050.02—
180 × 1081801080.02—
185 × 1111851110.02—
190 × 1141901140.02—
195 × 1171951170.02—
200 × 1202001200.02—
205 × 1232051230.03—
210 × 1262101260.03—
215 × 1292151290.03—
220 × 1322201320.03—
225 × 1352251350.03—
230 × 1382301380.03—
235 × 1412351410.03—
240 × 1442401440.03—
245 × 1472451470.04—
250 × 1502501500.04—
255 × 1532551530.04—
260 × 1562601560.04—
265 × 1592651590.04—
270 × 1622701620.04—
275 × 1652751650.05—
280 × 1682801680.05—
285 × 1712851710.05—
290 × 1742901740.05—
295 × 1772951770.05—
300 × 1803001800.05—
320 × 1923201920.06—
480 × 2884802880.14—
640 × 3846403840.25—
720 × 4327204320.31—
800 × 4808004800.38—
960 × 5769605760.55—
1080 × 64810806480.7—
1200 × 72012007200.86—
1280 × 76812807680.98—
1440 × 86414408641.24—
1600 × 96016009601.54—

Using 5:3 in CSS

CSS
/* Modern — one line */
.box { aspect-ratio: 5 / 3; }

/* With a fixed width */
.box { width: 100%; max-width: 800px; aspect-ratio: 5 / 3; }

/* Legacy padding-top hack, if you still need it */
.box-legacy { position: relative; }
.box-legacy::before { content: ""; display: block; padding-top: 60%; }
.box-legacy > * { position: absolute; inset: 0; }

Questions about 5:3

What resolution is 5:3?

5:3 is a ratio, not a fixed resolution — any size where width ÷ height equals 1.6667 qualifies. The smallest whole-pixel pair is 5 × 3, and common ones include 640 × 384, 720 × 432, 800 × 480, 960 × 576.

What is 5:3 used for?

Super 16 film, some ultrawide phone panels.

How do I set 5:3 in CSS?

Use the aspect-ratio property: aspect-ratio: 5 / 3;. The element then keeps that shape at any width. It is supported in every current browser.

What is 5:3 the other way round?

Rotated 90 degrees it becomes 3:5.

How do I calculate a 5:3 height from a width?

Multiply the width by 0.6. For example 1080 × 0.6 = 648. The calculator does it both directions.

Other aspect ratios

All resolutions on this page are computed directly from the ratio, so every pair is exact. See methodology.