Questions tagged [aspect-ratio]

The aspect ratio of an element describes the proportional relationship between its width and its height.

The aspect ratio of an element describes the proportional relationship between its width and its height.

enter image description here

It is commonly expressed as two numbers separated by a colon, as in 16:9. For an x:y aspect ratio, no matter how big or small the element is, if the width is divided into x units of equal length and the height is measured using this same length unit, the height will be measured to be y units.

For example, older square box tv's are typically 4:3 aspect ratio (or 1:1.33). This translates to meaning basically, for every 4 pixels across, 3 pixels are down. We can extrapolate from that, a standard-definition tv screen is commonly 640 x 480 pixels.

  • 4:3 is used for many computer monitors and older, non-widescreen televisions.
  • 1:1 is an uncommon square-format aspect ratio occasionally used in photography.
  • 5:4 is a computer monitor resolution, now more commonly used in mobile telephone cameras.
  • 16:9 is the aspect ratio used for High Definition television, as well as movies.
  • 14:9 is a compromise aspect ratio used to create a picture acceptable to both 4:3 and 16:9 televisions.
  • 16:10 is utilized in the majority of widescreen computer monitors.

16:9 aspect ratio

The main advantage of a 16:9 aspect ratio is that it is the standard that High Definition content is output at. This makes it vital if you plan on watching High Definition movies or sports, especially as these are now becoming increasingly more available. This is primarily due to the declining cost and growing popularity of Blu-Ray players, as well as the fact that many governments are actively encouraging television companies to make HDTV broadcasts available. The 16:9 aspect ratio is particularly appropriate if you watch many modern films on a home movie theatre since most movies are now produced in 16:9 format.

4:3 aspect ratio

While the 4:3 aspect ratio is viewed as somewhat dated, it is still very common and is still the standard aspect ratio for computer screens. While it is true that High Definition content is becoming more and more prevalent, the majority of broadcasters still output in a 4:3 aspect ratio. While the same cannot be said for films, if you still watch a lot of VHS tapes of older films then a 4:3 television will allow for the image to take up the screen. Displayed on a 16:9 television it would appear stretched, or would have black borders running along the edges.

Common Device Aspect Ratios

| 4:3    |   3:2       |    16:10        |     17:10    |    16:9   |
| iPad 1 | iPhone 3GS- | Windows Phone 7 | Galaxy Tab 7 | Nokia C7  |
| iPad 2 | iPhone 4    | Google Nexus    |              | MeeGo N9  |
| iPad 3 | iPhone 4S   | Galaxy 10.1     |              | iPhone 5  |
| iPad 3 |             | Motorola Xoom   |              |           |
|        |             |                 |              |           |
1187 questions
12
votes
1 answer

CSS square based on height

Is it possible to make a square div with css based on its height in pixels? This question is similar to this one (marked as duplicate), but in this case I want height to be set in pixel or any unit. When based on width, there is a simple solution…
Adam Pietrasiak
  • 12,773
  • 9
  • 78
  • 91
12
votes
2 answers

Why FFmpeg print SAR instead of PAR?

If my knowledge is correct, SAR (Storage Aspect Ratio) is the ratio of pixel dimensions. For example, a 640 × 480 video has a SAR of 640/480 = 4:3. Whereas PAR (Pixel Aspect Ratio) is ratio of pixel height and width, and most of modern videos have…
Nelson Tatius
  • 7,693
  • 8
  • 47
  • 70
12
votes
4 answers

C# : How to calculate aspect ratio

I am relatively new to programming. I need to calculate the aspect ratio(16:9 or 4:3) from a given dimension say axb. How can I achieve this using C#. Any help would be deeply appreciated. public string AspectRatio(int x, int y) { //code am looking…
user1321391
  • 123
  • 1
  • 1
  • 5
11
votes
2 answers

Corona SDK Cross Device Screen Resolution

This is going to be one of those awkward questions looking for an answer that probably doesn't exist, but here goes. I've been developing some simple games using Corona and whilst the functionality seems to work pretty well across most of the…
Alexander Holsgrove
  • 1,795
  • 3
  • 25
  • 54
11
votes
3 answers

How do I automatically scale images in flutter to fit every resolution without overflow and scrolling?

I'm new and my English is pretty bad. Please answer easy to understand... I already tried using the AspectRatio Widget but it, combined with a Center widget, moved my buttons in the center. Apart from that it worked but the buttons really need to…
PhiJoTo
  • 205
  • 1
  • 2
  • 7
11
votes
3 answers

Set UIImageView AspectRatio constraint programmatically in swift 3

I have an UIImageView in storyboard which AspectRatio is 1:1, that I want to change to 2:1 programmatically in ViewController in some cases. I create reference of that constraint in ViewController but unable to set the constraint.
Shariif Islam
  • 259
  • 1
  • 2
  • 15
10
votes
1 answer

OpenGL stretched shapes - aspect ratio

I got my openGL view at a size of (lets say..) 800(width)x600(height). Then i got a 2D object of coords: 0.0 , 0.0 0.1 , 0.0 0.1 , 0.1 0.0 , 0.1 this, as you understand is supposed to be a square (based on analogy). But on my openGL view prints…
apoiat
  • 576
  • 2
  • 5
  • 16
10
votes
5 answers

16:9 aspect ratio with fixed width

If I were to embed a YouTube video for example Using jQuery would I set a height with an aspect ration of 16:9 so if the…
Yusaf Khaliq
  • 3,333
  • 11
  • 42
  • 82
10
votes
1 answer

Maintaining aspect ratio of a stretched flex item

I have a card of sorts. On the right side of it is variable width/height content, and the left side is an image. I'd like the image to stretch vertically, taking up all of the vertical space in the card, and maintain an aspect ratio of 1/1 (so…
noob0909
  • 101
  • 2
10
votes
2 answers

Android: How to maintain aspect-ratio in animation

The animation I am running inside an imageview refuses to maintain the aspect-ratio of the image frames. The following answers in SO are quite informative, but don't seem to work for me: How to scale an Image in ImageView to keep the aspect…
OceanBlue
  • 9,142
  • 21
  • 62
  • 84
10
votes
2 answers

SVG circle should adapt to CSS grid height without overlapping

In the following example, the circle adapts to the grid width and keeps its aspect ratio. As the container width shrinks, the circles shrinks with it... When height is smaller than width however (second box), the circle doesn't shrink overlaps…
Th3S4mur41
  • 1,930
  • 1
  • 13
  • 28
10
votes
1 answer

Image plot in bokeh with tight axes and matching aspect ratio

I'm using bokeh 1.0.1 version inside a Django application and I would like to display microscopic surface images as zoomable image plots with a color-encoded height and colorbar. In principle this works, but I have problems to get plots with the…
mcrot
  • 446
  • 2
  • 12
10
votes
2 answers

iPhone X / Samsung Galaxy S8 aspect ratio issues for cocos2dx games

I have been designing all my landscape oriented cocos2dx mobile games at 2508x1584 with a "always visible area" of 2112x1408 so there would be no black borders or scaling, just a bit of cropping which would be limited to the "maybe not visible area"…
Greg Ellis
  • 1,957
  • 3
  • 19
  • 27
10
votes
1 answer

CSS: keep aspect ratio without overflowing content

I am using CSS and I want to create a box with a certain ratio that is kept no matter the size of the box. But also I want the box to grow if there is more content in it. To summerize in order words: CSS only (if possible) preserve given aspect…
Type-Style
  • 1,791
  • 1
  • 16
  • 35
10
votes
1 answer

Fix Android Camera app aspect ratio and rotation

How it looks: http://i41.tinypic.com/30278m1.png It looks like in the pic ,I want it to have a correct aspect ratio with correct rotaion Take a look the code please , how can I fix it ? This is my code: public class MainActivity extends Activity…
A.Jouni
  • 377
  • 2
  • 4
  • 14