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

UIImageView keep aspect ratio, but fit to width

I have a UIImageView with a fixed width and height. I don't want to change the frame of the UIImageView. I want to have it hold an image where I keep the aspect ratio and I fit the width and let the image be either too tall, or too short for the…
SirRupertIII
  • 12,324
  • 20
  • 72
  • 121
19
votes
2 answers

Set width according to height

I saw solution for height depending on width: css height same as width. Or here: https://stackoverflow.com/a/6615994/2256981. But my question is opposite. My element:
Style for it: body, html { margin:…
jevgenij
  • 824
  • 1
  • 7
  • 16
19
votes
8 answers

Resize a WPF window, but maintain proportions?

I have a user resizable WPF Window that I want to constrain the resizing so the aspect ratio of the window stays constant. Ideally I would like to constrain mouse location when the window is being resized by dragging a corner to positions that…
Charley Rathkopf
  • 4,720
  • 7
  • 38
  • 57
19
votes
4 answers

CSS: Keeping a div's height relative to its width

My question is very similar to this question: CSS: 100% width or height while keeping aspect ratio? I have a div whose position is fixed. The width of the div must be 100% and its height exactly 1/6th of its width. Is there a -webkit-calc() way of…
Akshaya Shanbhogue
  • 1,438
  • 1
  • 13
  • 25
19
votes
3 answers

Stretch to fill VideoView, aspect ratio of VideoView

I try to stretch video in aim to fill videoview. The target is to create view that in device look like the first pic (like it look in layout preview). Most of the answers to this questions refer to this link. I tried this but I still didn't fill…
idan
  • 1,508
  • 5
  • 29
  • 60
18
votes
5 answers

CSS how do you stretch to fit and maintain the aspect ratio?

I have the following css: .mod.left { background-image: url("http://www.myimage.jpg"); display: block; height: 160px; overflow: hidden; width: 175px; } That corresponds to this HTML:
It results in this mess: if I use…
JZ.
  • 21,147
  • 32
  • 115
  • 192
18
votes
19 answers

Your thoughts on web design for 16:9 screens

I design web apps mainly for desktop use (not PDAs, phones etc) by co-workers and customers. As more users become equipped with 16:9-type screens the traditional screen layouts are no longer ergonomic. For example, a long vertical navi bar might not…
paul
  • 13,312
  • 23
  • 81
  • 144
18
votes
4 answers

Resize image to maintain aspect ratio in Python, OpenCv

I'd like to get a 1000 x 1000 picture in Python from any input picture so that the input doesn't lose it's aspect ratio. In other words, I want to resize the input so that its longer dimension is 1000 pixels and "fill" the other dimension with the…
Hendrik
  • 1,158
  • 4
  • 15
  • 30
18
votes
9 answers

How Can I Only Allow Uniform Resizing in a WPF Window?

I don't want my window to be resized either "only horizontally" or "only vertically." Is there a property I can set on my window that can enforce this, or is there a nifty code-behind trick I can use?
Mark Carpenter
  • 17,445
  • 22
  • 96
  • 149
17
votes
2 answers

Use flexbox and maintain an aspect ratio even though content is sized differently

There are a lot of questions on SO about maintaining the aspect ratio of an element (with flexbox or without). However, my problem is slightly different as I want to override the aspect ratio of a child image element: Make sure the image covers the…
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
17
votes
5 answers

How to calculate Android screen aspect ratio mathematically

One of the device screen properties that Android lets an app query is it's aspect ratio. In the examples that I have seen this property seems to have only two values - long and notlong. I am trying to reverse engineer the logic being used by Android…
Ethen Hunt
  • 579
  • 2
  • 4
  • 13
17
votes
4 answers

Maintain aspect ratio according to width and height

It is possible to fit and center a square div in the viewport and always maintain it's aspect ratio according to width and height? Requirements : only CSS the size of the square must adapt to the smallest dimension (width or height) of viewport…
TheGr8_Nik
  • 3,080
  • 4
  • 18
  • 33
17
votes
6 answers

How to align ImageView to the bottom, fill its width and height, and keep its aspect ratio?

Background There are various XML attributes for ImageView to scale its content , and various layout views that allow to place views and set their sizes. However, I can't figure out how to scale an imageView nicely on some cases. An example of it is…
android developer
  • 114,585
  • 152
  • 739
  • 1,270
16
votes
1 answer

CSS Aspect Ratio - set width of child element based on dynamic parent height

To begin, let me explain what I know exists and have tried variations of: The typical aspect ratio hack, which manages the height of an element based on a width. Stackoverflow answers, where the height is determined by an image, which then dictates…
Donnie D'Amato
  • 3,832
  • 1
  • 15
  • 40
16
votes
4 answers

Android ImageView - 16:9

I need to set the Bitmap into ImageView to keep ratio 16:9. Do you have any advice? The main solution is probably in the override method onMeasure of custom ImageView but how?
user997777
  • 569
  • 1
  • 7
  • 19