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
0 answers

openGL Resizing keeps aspect ratio but also scales objects

So I am working on a simple project in openGL and C++ where i have just a white circle drawn on screen for now. I added a function to maintain the aspect ratio in the canvas i am using and it seems to be working flawlessly. If you resize the window…
Dany Khalife
  • 1,850
  • 3
  • 20
  • 47
0
votes
2 answers

Image Resize Math, but not Resizing Itself

Is there a php function which will do image resizing math itself but not create a new file? I created a simple proportionally-resize-an-image math script and I realized there is more to it than just geometry, such as aspect ratio and such. Basic…
Orangeman555
  • 1,179
  • 2
  • 21
  • 45
0
votes
1 answer

Aspect Ratio of images on the fly

I have a function that pulls images from an external location and the arrive with the proportions of 952 x 390 but they are displayed on my site 960 by 380 is there anyway using PHP that I could change the ratio so they do not look so stretched?
Jess McKenzie
  • 8,345
  • 27
  • 100
  • 170
0
votes
2 answers

iPhone gallery app crops photo to 3:2 from 4:3 aspect ratio, how?

The photo taken using the UIImagePickerController is of 4:3 aspect ratio. However, the full screen aspect ratio is 3:2. So the gallery app is doing some magic to show the photo as 3:2 aspect ratio. When you zoom out in the full screen view, the…
mohkhan
  • 11,925
  • 2
  • 24
  • 27
0
votes
1 answer

Stretchable gui in Qt

Is it possible to create a GUI in C++/Qt that will stretch seamless across the screen? I don't refer to a rearrangement of the GUI elements (buttons/text etc..), I mean a complete change in the aspect ratio of the GUI as it were a plain image.
Gianluca Ghettini
  • 11,129
  • 19
  • 93
  • 159
0
votes
2 answers

How can I find out if an aspect ratio is > 1:5?

Say I'm targeting all images on a page and want to make sure that they all pass a test of being > 1:5... This will give me the aspect ratio (from: here): function gcd(a, b) { return (b == 0) ? a : gcd(b, a % b); } var image =…
bob_cobb
  • 2,229
  • 11
  • 49
  • 109
0
votes
2 answers

Show correct aspect ratio

I am trying to get the aspect ratio of a photo but the following code shows wrong aspect ratio on a photo with 3776 in width and 2520 in height (472:315) but it shows correct aspect ratio on a photo with 3968 in width and 2232 in height though…
Airikr
  • 6,258
  • 15
  • 59
  • 110
0
votes
1 answer

Android screen size resolution aspect ratio

I am almost done with my first app, not anything awesome. But my problem is that i have only used the hdpi drawable folder. I have made it fit the screen resolution 480x800 which is 3:5 aspect ratio. It works in all sizes in 3:5 aspect ratio. But…
Peter
  • 1,848
  • 4
  • 26
  • 44
0
votes
1 answer

jQuery image slide that does not stretch images

I am looking for a jQuery image slider. The issue with the popular Nivo Slider is that it stretches the images to fit the width of the slider. I am looking for a slider that does not do that. I also have a max-width and max-height I want these…
user974896
  • 1,795
  • 4
  • 28
  • 48
0
votes
1 answer

Aspect ratio of an image while filling screen and scrolling

I am working on a site which can be found running at www.musidoraland.co.uk. I have four pictures that I need to fill the background whatever the screen size and still retain their aspect ratio, at the moment they are stretched or squished. However…
BWCub
  • 7
  • 5
0
votes
2 answers

maintaining aspect ratio

I am working on an image cropping tool at the moment, the image crop tool comes from jCrop, what I am trying to is make the image the user takes the crop from smaller than the original uploaded. Basically if uploads a landscape image I need to make…
Udders
  • 6,914
  • 24
  • 102
  • 194
0
votes
1 answer

Smooth aspect change during orientation change

When the screen of the iPhone orientation changes, I adjust my projection matrix of my 3D rendering to the new aspect value. However, doing this in either willRotateToInterfaceOrientation or didRotateFromInterfaceOrientation would cause the aspect…
Stefan Paul Noack
  • 3,654
  • 1
  • 27
  • 38
0
votes
1 answer

Using texture during window resize

So what I'm trying to do is copy the current front buffer to a texture and use this during a resize to mimic what a normal window resize would do. I'm doing this because the scene is too expensive to render during a resize and I want to provide a…
0
votes
1 answer

Has anybody used AspectMap?

I have just stumbled accross the following AOP framework built on top of StructureMap and was wondering if anybody has any experience using it. Any good, any…
c00ke
  • 2,245
  • 5
  • 26
  • 34
0
votes
1 answer

How to mantain aspect ratio of elements while rotating a ScrollView?

Let's assume a device of 800x1280 pixels in portrait mode with the following layout:
oblitum
  • 11,380
  • 6
  • 54
  • 120