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
16
votes
3 answers

Explain Aspect Ratio and respective terms in iOS?

I want to understand Aspect Ratio. Here, I am setting Aspect Ratio of an UIImageView. These are options when I click this constraint. How this constraint works and what are "PRESETS", Reverse Multiplier and Convert to Decimal. Thanks.
Chatar Veer Suthar
  • 15,541
  • 26
  • 90
  • 154
16
votes
10 answers

How to "smart resize" a displayed image to original aspect ratio

I have an application in which end-users can size and position images in a designer. Since the spec calls for the image to be "stretched" to the containing control, the end user can end up with an awkwardly stretched image. To help the user with…
Paul Sasik
  • 79,492
  • 20
  • 149
  • 189
15
votes
1 answer

Aspect ratio in UIImageView

I got app which can add photo from camera or gallery. After adding each photo showes in UIImageView. But they show with bad aspect ratio. Photoes are extended on UIImageView's size. How can i show photoes with their real aspect ration? UPD and what…
Eugene Trapeznikov
  • 3,220
  • 6
  • 47
  • 74
15
votes
6 answers

Android VideoView crop_center

I have a RelativeLayout
Vladyslav Matviienko
  • 10,610
  • 4
  • 33
  • 52
15
votes
4 answers

How do I find the natural size/dimensions of a Flash SWF file?

I've been given a Flash file (.swf extension) to put into a web page. Opening the file in my browser makes it quite blurry, so I'm assuming there is a natural size for the file, same as an image. It's also rectangular so I need to work out the…
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
14
votes
3 answers

How to find correct values for width, height and viewBox with react-native-svg

I have been trying to do something that seemed easy, but I have been trying for a few hours and I can't find the solution. I have an SVG that needs to be on top of a screen. It came from the designer with these dimensions:
Luis Serrano
  • 1,174
  • 1
  • 8
  • 17
14
votes
3 answers

Specify the natural size of an HTML element

Let's talk about images in HTML. If I drop an image onto the page with no other constraints, it will assume its "natural size"---that is, the literal size of the image in pixels. If I specify a CSS max-width and max-height then it will keep its…
Calvin
  • 2,872
  • 2
  • 21
  • 31
13
votes
1 answer

ConstraintLayout: Unable to scale image to fit a ratio in RecyclerView

I have a recycler view with StaggeredGridLayoutManager. Within in I have custom items/views. Each item is defined as a ConstraintLayout where there is an image which is supposed to have a constant aspect ratio. But the image is to still be able…
Sunny
  • 7,444
  • 22
  • 63
  • 104
13
votes
5 answers

How to have a circular, center-cropped imageView, without creating a new bitmap?

Note: I know there are a lot of questions and repositories about this, but none seems to fit what I try to achieve. Background Given a bitmap of any aspect-ratio, I wish to set it as the content of an ImageView (using a drawable only, without…
android developer
  • 114,585
  • 152
  • 739
  • 1,270
13
votes
2 answers

Media queries to cover all major pc and laptops aspect ratio

I want to build some media queries to cover most of the aspect ratio out there for pc/laptops. My first attempt was this: @media screen and (min-device-aspect-ratio: 4/3){ header::after{ content: '4/3'; } } @media screen and…
13
votes
3 answers

Nexus 4 Camera preview aspect Ratio always requires 16x9 surfaceview? Why

Device Nexus 4 Android ver: 4.2.2 Hoping someone else has found this and can explain how to resolve it.... Nexus 4 supports the following preview sizes: - W:1280 H:720 Ratio: 1.777777 W:800 H:480 Ratio: 1.6666666 W:768 H:432 Ratio: 1.7777778 W:720…
Iain
  • 131
  • 1
  • 4
13
votes
4 answers

Scaling HTML5 canvas width preserving w/h aspect ratio

I have a canvas element with dimensions of 979X482px and I'd like to have it stretch to fit the width of any given browser window, keeping the aspect ratio of width/hight 1 to 1, I want the height to scale relative to width of the canvas. Any…
dcd0181
  • 1,493
  • 4
  • 29
  • 52
12
votes
5 answers

Algorithm to resize image and maintain aspect ratio to fit iPhone

I'm creating a web service for an iPhone app to interact with. When my client uploads images server-side, I want my php script to resize the image, whilst maintaining the aspect ratio, so that it will fit onto the iPhone screen. (i.e. the longest…
Alex Coplan
  • 13,211
  • 19
  • 77
  • 138
12
votes
3 answers

Graphing points on a map but the error code is "ValueError: 'box_aspect' and 'fig_aspect' must be positive"

I am trying to plot a collection of points onto a graphic of King County, WA. I can show the graphic with the following code: fig, ax = plt.subplots(figsize = (15,15)) kings_county.plot(ax=ax) This gives me the graphic. I then read in the points…
Paul
  • 131
  • 2
  • 7
12
votes
8 answers

A simple way to put a UIImage in a UIButton

I have a UIButton in my iPhone app. I set its size to 100x100. I have an image that is 400x200 that I wish to display in the button. The button STILL needs to stay at 100x100... and I want the image to downsize to fit... but keep the correct aspect…
Alice
  • 141
  • 1
  • 5