Como usar: Aspect Ratio Calculator
- Enter a ratio (or click a common one like 16:9 or 9:16).
- Type a width to get the matching height — or a height to get the width.
- To find the ratio of an existing image or screen, enter its size under Find the ratio of a size; click Use this ratio to resize with it.
- Copy the CSS (
aspect-ratioplus the padding-top fallback) and pick a standard size from the table.
What is an aspect ratio?
An aspect ratio is the proportional relationship between width and height, written as width:height. A 1920 × 1080 video and a 1280 × 720 video are different sizes but share the same 16:9 ratio, so one scales to the other without stretching or cropping. Keeping the ratio when resizing is what prevents distorted images and black bars.
Aspect ratio formulas
- New height = new width × ratio height ÷ ratio width — e.g. 1280 × 9 ÷ 16 = 720.
- New width = new height × ratio width ÷ ratio height — e.g. 1080 × 16 ÷ 9 = 1920.
- Simplify a size: divide both sides by their greatest common divisor (GCD). 1920 and 1080 share a GCD of 120, giving 16:9.
Some sizes don’t reduce neatly: 1366 × 768 (a common laptop resolution) simplifies to 683:384, which is approximately 16:9. The calculator shows the exact ratio and the nearest common ratio.
Common aspect ratios and where they’re used
| Ratio | Decimal | Typical use |
|---|---|---|
| 16:9 | 1.778 | HD/4K video, YouTube, monitors, presentations |
| 9:16 | 0.5625 | Stories, Reels, TikTok, YouTube Shorts |
| 4:3 | 1.333 | Older TVs and monitors, iPad, many compact cameras |
| 3:2 | 1.5 | 35 mm film, DSLR/mirrorless photos, Surface laptops |
| 1:1 | 1 | Square social posts, avatars, product thumbnails |
| 4:5 | 0.8 | Portrait feed posts on Instagram and Facebook |
| 21:9 | ≈ 2.33 | Ultrawide monitors, cinematic video |
| 1.91:1 | 1.91 | Open Graph / link preview images (1200 × 630) |
Aspect ratio in CSS
Modern browsers support the aspect-ratio property: aspect-ratio: 16 / 9; on an element with a width gives it the matching height — perfect for responsive video embeds, cards and image placeholders that prevent layout shift (good for Core Web Vitals CLS). The older technique is the padding-top hack: a wrapper with height: 0; padding-top: 56.25% (9 ÷ 16 × 100), because vertical padding percentages are relative to the element’s width. Both are generated above. For the image files themselves, use the Image Resizer; for link previews, the OG Image Generator creates 1200 × 630 images.
Também pesquisado como: aspect ratio, 16:9 calculator, ratio calculator, resolution calculator, image ratio, video aspect ratio, css aspect-ratio, padding-top hack.
Ferramentas que combinam com: Aspect Ratio Calculator
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
- PX to REM Converter — Convert between pixels, rem and em with your own root font size — or paste a whole stylesheet and convert every px value in one go.
- Calculadora de porcentagem — Sete cálculos de porcentagem do dia a dia em uma única página.
- Conversor de algarismos romanos — Converte qualquer número de 1 a 3.999.999 em algarismos romanos — ou transforma algarismos romanos de volta em números — com uma explicação detalhada de cada símbolo.
Perguntas frequentes
How do I calculate height from width and aspect ratio?
Is 1920×1080 16:9?
What aspect ratio is 1080×1350?
What is the padding-top value for 16:9?
Should I use aspect-ratio or the padding hack in CSS?
aspect-ratio; it is supported by all current browsers and needs no wrapper. Keep the padding hack only if you must support very old browsers such as Safari before 15.