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
74
votes
20 answers

How to know the image size after applying aspect fit for the image in an UIImageView

I am loading an image to an imageview with mode as 'Aspect Fit'. I need to know the size to which my image is being scaled to. Please help.
Nithin
  • 6,435
  • 5
  • 43
  • 56
72
votes
10 answers

Maintaining aspect ratio with FFmpeg

I need to convert a bunch of video files using FFmpeg. I run a Bash file that converts all the files nicely, however there is a problem if a file converted is not in 16:9 format. As I am fixing the size of the screen to -s 720x400, if the aspect…
0-alpha
  • 3,281
  • 5
  • 20
  • 12
53
votes
10 answers

Fixed aspect ratio View

How would I go implementing a fixed aspect ratio View? I'd like to have items with 1:1 aspect ratio in a GridView. I think it's better to subclass the children than the GridView? EDIT: I assume this needs to be done programmatically, that's no…
Jani
  • 1,088
  • 1
  • 10
  • 18
49
votes
2 answers

How to define fixed aspect-ratio for (base R) scatter-plot

I am plotting correlation coefficients (values = 0.0:1.0) for two isotopes measured in each individual from two populations. I would like to have a fixed aspect-ratio for my scatter-plot so that the x- and y-axis are exactly the same size no matter…
Keith W. Larson
  • 1,543
  • 2
  • 19
  • 34
48
votes
6 answers

Strategies for Handling Multiple Screen Resolutions and Aspect Ratios in Web Development

Back in the day, 800 x 600 was the screen resolution to design for - and maybe 640 x 480. Then along came 1024 x 768, etc, etc, etc. But then it gets worse: now we have not only different resolutions but also different aspect ratios. What…
Adrian K
  • 9,880
  • 3
  • 33
  • 59
45
votes
8 answers

Square DIV where height is equal to viewport

I need to create a DIV where width=height, and height=100% of the viewport (which, obviously, is variable). In other words, a perfectly square DIV that calculates it's dimensions based on the height of the viewport. Elements within that DIV will…
Ila
  • 3,528
  • 8
  • 48
  • 76
44
votes
6 answers

Multiple screen resolutions/aspect ratios (games)

EDIT: Thanks for all your answers and comments. After thinking about it i would rephrase the core of the question to: "How to determine and limit the minimum resolution/ratio my game is able to run on". Because imo either the game becomes unplayable…
mibollma
  • 14,959
  • 6
  • 52
  • 69
43
votes
5 answers

How can I scale video in ExoPlayer-V2 - Play Video In Full Screen

I am playing video from URL on Exoplayer, it stretching the video on resizing/on using resize_mode as I have mentioned in layout file using this I am not able to maintain the aspect ratio of video. I want to do scale type CENTER_CROP like we do in…
Sagar
  • 5,273
  • 4
  • 37
  • 50
43
votes
4 answers

Make a

I am working on a web app that will generate an NxN grid based on the user's selection of N. I want the total width of the grid to be relative (ie 100% of the available space) so that users can print on various paper sizes. I can easily calculate…
Nate
  • 2,035
  • 8
  • 23
  • 33
40
votes
4 answers

Make table cells square

How to ensure that each cell of table should become square without using fixed sizes? And be responsive when they change width. table { width: 90%; } td { width: 30%; } tr { /** what should go here? **/ } …
ClassCastException
  • 1,453
  • 6
  • 15
  • 34
38
votes
13 answers

VideoView to match parent height and keep aspect ratio

I have a VideoView which is set up like this:
Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
37
votes
9 answers

How do I keep the aspect ratio on image buttons in android?

I have 5 square ImageButtons that I want to have lined up side by side on the bottom of the screen. I have each one set (different id's) as:
clayton33
  • 4,176
  • 10
  • 45
  • 64
37
votes
5 answers

How to maintain widgets aspect ratio in Qt?

How is it possible to maintain widgets aspect ratio in Qt and what about centering the widget?
Bleadof
  • 1,157
  • 1
  • 9
  • 19
37
votes
7 answers

Maintain div aspect ratio according to height

I need to maintain the width of an element as a percentage of its height. So as the height changes, the width is updated. The opposite is achievable by using a % value for padding-top, but padding-left as a percentage will be a percentage of the…
Fijjit
  • 1,399
  • 2
  • 17
  • 31
33
votes
5 answers

ImageMagick: how to minimally crop an image to a certain aspect ratio?

With imagemagick, I'd like to crop an image, in a minimal fashion, so that it fits a given aspect ratio. Example: given an image of, say, 3038 x 2014 px, I want to crop it to have a 3:2 aspect ratio. The resulting image would then be 3021 x 2014 px,…
Kelley van Evert
  • 1,063
  • 2
  • 9
  • 17
1
2
3
79 80