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
32
votes
4 answers

Maintaining aspect ratio with min/max height/width?

I have a gallery on my site where users can upload images. I would like the images to sit in a div that maintains its height, the images should be no larger than 500px in height. The width should be automatic to maintain aspect ratio. HTML:
panthro
  • 22,779
  • 66
  • 183
  • 324
31
votes
1 answer

Python: How to Resize Raster Image with PyQt

I need to find a way to re-size an input raster image (such as jpg) to a specified width/height resolution (given in pixels). It would be great if PyQt while resizing a new image would keep an original image's aspect ratio (so there is no stretching…
alphanumeric
  • 17,967
  • 64
  • 244
  • 392
29
votes
2 answers

Show splash screen image with auto fit

I am using the following style to display a splash screen for an android application written in MonoDroid. However, it seems to take the image and maximize it to fit the whole screen while messing up the aspect ratio. Thus, the image looks huge and…
Telavian
  • 3,752
  • 6
  • 36
  • 60
27
votes
1 answer

Android Convert Px to Dp (Video Aspect Ratio)

Possible Duplicate: converting pixels to dp in android I'm trying to convert pixels to dp. What is the formula? Lets convert 640 and 480 into dp. The docs say this The conversion of dp units to screen pixels is simple: px = dp * (dpi /…
spentak
  • 4,627
  • 15
  • 62
  • 90
27
votes
6 answers

Pure CSS Solution - Square Elements?

If I have a
with a relative width (such as width: 50%), is there a simple way to make it have the same width as it does height without resorting to JavaScript?
Trey Keown
  • 1,345
  • 3
  • 16
  • 23
26
votes
4 answers

Java: maintaining aspect ratio of JPanel background image

I have a JPanel with a painted background image and a layout manager holding other smaller images, all of this inside a JFrame. The background image is pretty big and I want to be able to have it maintain its aspect ratio whether its on a big or…
exit_1
  • 1,240
  • 4
  • 13
  • 32
25
votes
4 answers

Set aspect ratio programmatically for imageView

I have a problem with showing a landscape image without centerCrop. I tried PercentFramelayout, and set aspect ratio programmatically like this: laParams.percentLayoutInfo.aspectRatio = img.width.toFloat() / img.height.toFloat() The result is ok…
24
votes
7 answers

FFmpeg - Change resolution of the video with aspect ratio

all. How to change resolution of the video with aspect ratio with FFmpeg? There are options http://manpages.ubuntu.com/manpages/oneiric/man1/ffmpeg.1.html -s size Set frame size. The format is wxh (ffserver default = 160x128, …
Arthur
  • 3,253
  • 7
  • 43
  • 75
24
votes
3 answers

CSS scale several images to fit viewport keeping aspect ratio

I'm creating a gallery where I want to list all images from an album on one page : Big Picture style : Unlike Big Picture, I want the images to proportionally scale to fit to the width of the container div (.section-images, which is set to margin:…
MindOverflow
  • 265
  • 1
  • 2
  • 6
23
votes
2 answers

Calculate Height for Image/Video based on Aspect Ratio and Width

I have a width: 240 I have aspect ratio: 2.40 I need to get the height based on those two variables. What's the formula?
Shawn
  • 233
  • 1
  • 2
  • 4
23
votes
2 answers

height: auto on SVG not working

I am trying to use an SVG sprite sheet using the "symbol" method detailed here. http://css-tricks.com/svg-sprites-use-better-icon-fonts/ My HTML is very simple. And here is an example…
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
22
votes
5 answers

Div that fits into parent and maintains an aspect ratio

I've got a div element that maintains an aspect ratio: it calculates its height based on its width (using the padding trick). What I'd like to do is to put this div into another one by fitting the maximum space available, vertically and…
haxpanel
  • 4,402
  • 4
  • 43
  • 71
22
votes
3 answers

How do I crop an Axes3D plot with square aspect ratio?

Here's a barebones example: import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D fig = plt.figure() f = fig.add_subplot(2, 1, 1, projection='3d') t = fig.add_subplot(2, 1, 2, projection='3d') # axes for d in {f, t}: …
endolith
  • 25,479
  • 34
  • 128
  • 192
21
votes
3 answers

Objective C: How to fix aspect ratio of image (and not change to fit imageview frame)

I am using the UIImagePickerController to select images for my app. However I am facing some challenges with regards to maintaining aspect ratio of the selected images For example, I have a raw image on the phone as follows (not square…
Zhen
  • 12,361
  • 38
  • 122
  • 199
21
votes
10 answers

Mosaic of images HTML/CSS

I want to make an image layout with portrait images inside a div with a fixed aspect ratio of 3:2. The size of images is 327x491px. The main issue is unwanted spaces between images. How do I align images as a mosaic using only HTML/CSS? HTML :
Developer Desk
  • 2,294
  • 8
  • 36
  • 77
1 2
3
79 80