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
0
votes
1 answer

Flex - Scale application with locked aspect ratio

I want to be able to resize my application (which is on by default, by dragging a corner of the app to resize the whole window). However, I'd like to lock the aspect ratio of this, so that when I resize, the main window will keep the original aspect…
Stian Berg Larsen
  • 543
  • 2
  • 10
  • 29
0
votes
1 answer

Any defacto standard ratio for full page website design

I'm working on an image heavy single page site and I'm trying to figure out a safe height/width ratio so I could get a rough idea of how tall the slideshow images could get if the width were set to 100% while accomodating all the page elements…
qwalter
  • 1
  • 1
0
votes
0 answers

WPF item panel that keeps aspect ratio

I have an ItemsControl which may contain an arbitrary number of items (unknown at design time). Each of these items is basically represented as an infinitely-scalable image with a fixed aspect ratio (ie. the image will draw itself in whatever space…
Miral
  • 12,637
  • 4
  • 53
  • 93
0
votes
1 answer

How do I make my XNA game fullscreen while maintaining aspect ratio and centered?

I haven't been able to find any good tutorials for making a game fullscreen while maintaining the aspect ratio. It's a bit difficult for me to describe in words, so I'll show you in two pictures. What I currently…
0
votes
1 answer

Android Screen Ratios

I'm using OpenGL ES 2.0 on Android and I and I initialise my display like so: float ratio = (float) width / height; Matrix.orthoM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7); //Using Orthographic as developing 2d What I'm having trouble…
Zippy
  • 3,826
  • 5
  • 43
  • 96
0
votes
2 answers

Resize Image and Maintain Aspect Ratio

Given a height and width. how can i resize the image to contain into my maximum holder for that image but maintaining aspect ratio?
foTest
  • 13
  • 1
0
votes
1 answer

HTML CSS Horizontal Layout Scaling

I'm trying to make a horizontal layout (with columns) where the content scales based on the browser window height. I came across answers about perfect ratio based on width, but I want to have an infinite width (as the amount of content won't always…
0
votes
1 answer

How can I play video in full screen without changing the video aspect ratio in Air

I am creating an applciation in Air using SDK 4.1 which plays videos. For doing this I created a UIComponent and added Video object in UIComponent. Video file is .flv format. Now when I make video full screen then video aspect ratio is changed. The…
Vivek
  • 663
  • 2
  • 13
  • 40
0
votes
2 answers

CSS: set image height; aspect ratio; Gall-Peters projection

I have a Gall-Peters projection on my website. I want to give the image 100% of available width while keeping the height correct so that countries do not get elongated. What is the right CSS to keep the aspect ratio?
Tim
  • 8,669
  • 31
  • 105
  • 183
0
votes
1 answer

How to re-size an image and preview it before uploading

I have an input->type->file button which allow users to upload images. I am trying to preview the image before they can submit(upload) it. Can anyone help me solve, how can I re-size the image (before clicking submit) to fit the div (for the…
user1846348
  • 241
  • 1
  • 10
  • 22
0
votes
1 answer

Javascript resize window to original aspect ratio

So the window I am opening, does so as below: test The page opens a login page which requires a minimum width of 800 and height of 600 in order to see all the…
treasureireland
  • 87
  • 2
  • 3
  • 10
0
votes
2 answers

How to re-size an image keeping there aspect ratio and upload it

I have a button which uploads a background image to a folder and saves the file name to the database, but I cant figure how to re size the image before uploading it. Actually I am facing two problems. 1 - How to resize the image and upload it. 2 -…
user1846348
  • 241
  • 1
  • 10
  • 22
0
votes
3 answers

how to keep aspect ratio with different android devices

So I'm trying to put an image inside a scrollview and have the image stretch to fit different sized screens. It'll stretch horizontally, but vertically it always comes out messed up. I've read so many pages of people with similar problems, but…
0
votes
2 answers

creating a website that can scale down and scale up no matter the screen size

i am creating a website on my mac book 13 inch the background image i am trying to use is too big for my screen is their a way to keep the aspect ratio the same when developing on my screen so it will look the same scaled up or scaled down i have…
Miller90
  • 15
  • 1
  • 3
0
votes
1 answer

Change video player stream aspect ratio

I have a html video player element
Adrian
  • 671
  • 4
  • 17
  • 37