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
2060
votes
33 answers

How to auto-resize an image while maintaining aspect ratio

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit…
001
  • 62,807
  • 94
  • 230
  • 350
1422
votes
33 answers

Maintain the aspect ratio of a div with CSS

I want to create a responsive div that can change its width/height as the window's width changes. Are there any CSS rules that would allow the height to change according to the width, while maintaining its aspect ratio? I know I can do this via…
jackb
  • 14,241
  • 3
  • 17
  • 7
901
votes
26 answers

CSS force image resize and keep aspect ratio

I am working with images, and I ran into a problem with aspect ratios. As you can see, height and width are already specified. I added a CSS rule for images: img { max-width:…
moonvader
  • 19,761
  • 18
  • 67
  • 116
243
votes
6 answers

How to style a div to be a responsive square?

I want my div to adapt its height to always equal its width. The width is percental. When the parent's width decreases, the box should decrease by keeping its aspect ratio. How to do this is CSS?
danijar
  • 32,406
  • 45
  • 166
  • 297
187
votes
5 answers

Grid of responsive squares

I'm wondering how I would go about creating a layout with responsive squares. Each square would have vertically and horizontally aligned content. The specific example is displayed below...
garethdn
  • 12,022
  • 11
  • 49
  • 83
149
votes
19 answers

Resize UIImage by keeping Aspect ratio and width

I seen in many posts for resizing the image by keeping aspect ratio. These functions uses the fixed points(Width and Height) for RECT while resizing. But in my project, I need to resize the view based on the Width alone, Height should be taken…
Jasmine
  • 1,511
  • 2
  • 10
  • 5
143
votes
15 answers

Android Camera Preview Stretched

I've been working on making my custom camera activity on Android, but when rotating the camera, the aspect ratio of the surface view gets messed up. In my oncreate for the activity, I set the framelayout which holds the surface view that displays…
scientiffic
  • 9,045
  • 18
  • 76
  • 149
141
votes
9 answers

Maintain aspect ratio of div but fill screen width and height in CSS?

I have a site to put together that has a fixed aspect ratio of approximately 16:9 landscape, like a video. I want to have it centred and expand to fill the available width, and the available height, but never to grow larger on either side. For…
Henry Gibson
  • 2,038
  • 2
  • 15
  • 12
111
votes
10 answers

How to set the 'equal' aspect ratio for all axes (x, y, z)

When I set up an equal aspect ratio for a 3d graph, the z-axis does not change to 'equal'. So this: fig = pylab.figure() mesFig = fig.gca(projection='3d', adjustable='box') mesFig.axis('equal') mesFig.plot(xC, yC, zC, 'r.') mesFig.plot(xO, yO, zO,…
user1329187
109
votes
18 answers

What's the algorithm to calculate aspect ratio?

I plan to use it with JavaScript to crop an image to fit the entire window. Edit: I'll be using a 3rd party component that only accepts the aspect ratio in the format like: 4:3, 16:9.
Nathan
  • 4,017
  • 2
  • 25
  • 20
105
votes
6 answers

Is there a list of screen resolutions for all Android based phones and tablets?

If not, is there a list of screen resolutions for the most popular Android phones and tablets.
user783146
  • 1,511
  • 3
  • 12
  • 6
104
votes
3 answers

ConstraintLayout aspect ratio

Consider the following layout file:
102
votes
1 answer

How to scale SVG image to fill browser window?

This seems like it ought to be easy, but I'm just not getting something. I want to make an HTML page containing a single SVG image that automatically scales to fit the browser window, without any scrolling and while preserving its aspect ratio. For…
Miral
  • 12,637
  • 4
  • 53
  • 93
81
votes
7 answers

How to deal with different aspect ratios in libGDX?

I have implemented some screens using libGDX that would obviously use the Screen class provided by the libGDX framework. However, the implementation for these screens works only with pre-defined screen sizes. For example, if the sprite was meant for…
Rafay
  • 6,108
  • 11
  • 51
  • 71
79
votes
3 answers

Padding-bottom/top in flexbox layout

I have a flexbox layout containing two items. One of them uses padding-bottom : #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid…
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
1
2 3
79 80