Aspect Ratio
Aspect ratio is the proportional relationship between width and height, written width:height. A 3:2 frame is three units wide for every two units high. The ratio describes shape, not pixel count or physical size, so 2340 × 1560 and 3510 × 2340 share the same 3:2 aspect ratio.
What does an aspect ratio tell you?
The two numbers describe the shape of a rectangle. A ratio above 1 when written as width ÷ height is landscape; a ratio below 1 is portrait; 1 is square. The numbers do not promise a particular resolution. A small thumbnail and a large display can have the same ratio if their widths and heights scale by the same factor.
How do you separate ratio, resolution, and physical size?
These three labels answer different questions. Aspect ratio describes the frame's proportions. Resolution reports a pixel grid. Physical size reports a measurement such as inches or centimeters. None can replace the other.
| Label | It answers | Example |
|---|---|---|
| Aspect ratio | What shape is the frame? | 3:2 |
| Resolution | How many pixels form the grid? | 2340 × 1560 |
| Physical size | How large is the output? | 15 × 10 inches |
| Pixel density | How tightly are pixels packed? | 156 pixels per inch |
In this example, 2340 ÷ 1560 = 1.5, and 3 ÷ 2 = 1.5, so the grid is exact 3:2. Dividing each pixel dimension by 156 gives a 15 × 10 inch output at 156 pixels per inch. Changing only the density label can change the intended print size without changing the pixel ratio.
How do you calculate and simplify an aspect ratio?
For whole-number dimensions, find the greatest common divisor (GCD), then divide both sides by it. For 2340 × 1560, the GCD is 780: 2340 ÷ 780 = 3 and 1560 ÷ 780 = 2. The simplified ratio is 3:2.
The decimal form is useful for comparison but is not always an exact substitute for the colon form. For example, a 1700 × 1000 frame is exactly 17:10, or 1.7. Calling it 16:9 would be inaccurate because 16 ÷ 9 is about 1.7778. Use the aspect ratio finder when you need the exact reduced pair rather than the nearest familiar label.
How can you prove that two sizes have the same shape?
Cross multiplication avoids errors caused by rounded decimals. Compare width one × height two with height one × width two. If the products match, the rectangles have the same aspect ratio.
For 2340 × 1560 and 3510 × 2340, calculate 2340 × 2340 = 5,475,600 and 1560 × 3510 = 5,475,600. The equal products prove that the shapes match exactly. The second frame is 1.5 times the first in both directions: 2340 × 1.5 = 3510 and 1560 × 1.5 = 2340.
This test is stricter than comparing two rounded decimal labels. It also reveals whether a proposed resize used one scale factor for both axes or changed the shape.
What should you do when the source and frame have different ratios?
Choose based on what must be preserved. Consider a 1250 × 1000 source, which is exact 5:4, going into an 1800 × 1200 frame, which is 3:2.
| Method | Result | Tradeoff |
|---|---|---|
| Fit and pad | 1500 × 1200, plus 150 px on each side | Preserves the whole source |
| Fill and crop | 1800 × 1440, then remove 120 px top and bottom | Fills the frame but loses edges |
| Stretch | Force directly to 1800 × 1200 | Changes object shapes |
How do I tell whether the pixels or the aspect-ratio metadata are wrong?
Check the stored width and height, sample aspect ratio (SAR), and display aspect ratio (DAR) before changing pixels. If the pixels are correct but the display metadata is wrong, a metadata override may avoid re-encoding. If the pixels themselves are distorted, you must scale, crop, or pad and encode a corrected frame.
Start with an object whose real shape you know. A circular logo, wheel, clock face, or square title card is a useful reference. If the file reports 1920 × 1080 and square pixels but a known circle is already oval in a frame export, the distortion is in the pixels. Changing only the display label will not restore missing geometry.
If a raw frame looks correctly proportioned when viewed as square pixels, but the video player stretches it, inspect SAR and DAR. FFmpeg defines the relationship as DAR = width ÷ height × SAR. That means a 720 × 576 frame can display wider than its stored pixel ratio when it uses non-square pixels.
Sometimes. FFmpeg stream copy uses -c copy to copy compressed packets without decoding, filtering, or encoding. It can be fast and avoids generational quality loss, but it cannot run video filters. A container-level display-aspect override may work when the stored pixels are correct and the target container, codec, and player all honor that metadata.
ffmpeg -i input.mp4 -aspect 16:9 -c copy output.mp4
This command is a diagnostic option, not a universal repair. FFmpeg's own FAQ warns that the no-transcode form may not work across every format, codec, or player. Test the output in the actual playback environment before deleting the original.
How is aspect ratio used in CSS?
CSS can give an element a preferred proportion with the aspect-ratio property, for example aspect-ratio: 3 / 2. At least one dimension must be automatic for the preferred ratio to influence sizing. If both width and height are fixed, the declared ratio does not override those two fixed sizes.
Images and videos can also have an intrinsic or natural ratio. A rule such as aspect-ratio: auto 3 / 2 can provide a provisional ratio while replaced content loads, then use the content's natural ratio after it is available. This layout behavior is separate from permanently cropping or rewriting the media file.
Aspect ratio questions
Is aspect ratio the same as resolution?
No. Ratio describes shape; resolution describes a pixel grid. Many resolutions can share one ratio.
Which number comes first in an aspect ratio?
Width comes first and height comes second. A portrait frame therefore often has a smaller first number than second number.
Can two different resolutions have the same aspect ratio?
Yes. 2340 × 1560 and 3510 × 2340 are both exact 3:2 because both dimensions were scaled by the same factor.
What happens when an image and frame have different aspect ratios?
You must leave unused space, crop part of the source, or distort it. Padding and cropping preserve object proportions; stretching does not.
Sources
Definitions and browser behavior were checked against the CSS Box Sizing Module Level 4, the W3C CSS Images sizing model, and MDN's aspect-ratio reference. The 3:2 equality proof and 5:4-to-3:2 crop/pad ledger are original calculations for this page.