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
1 answer

Aspect Ratio wrong after onResume()

I am having a problem. The aspect ratio of my media player becomes messed up after onResume is called private void aspectRatio(MediaPlayer vp) { Integer videoHeight; Integer videoWidth; //Obtain current video's dimensions for keeping…
Raigex
  • 1,205
  • 12
  • 32
0
votes
1 answer

iOS - Playing videos with arbitrary aspect ratio

Is it possible to play videos of arbitrary ('exotic') aspect ratio, other than the usual 720p etc. (e.g., videos taken with an iPhone in portrait orientation, or videos cropped to be perfectly square, not rectangular)?
Nicolas Miari
  • 16,006
  • 8
  • 81
  • 189
-1
votes
1 answer

drawing an equilateral triangle in python

I'd like to draw an equilateral triangle in python by hard coding, I don't want to use specific features. The code I wrote is as follows: #Geometry of the system #drawing triangles #Triangle ABC #A #B #C # x axis values a = [1, 41, 81, 1] # y…
saba
  • 1
  • 2
-1
votes
1 answer

How to change aspect ratio or resolution, without needing to rewrite all code Unity?

Recently I thought: "Let's set the 'resolution' from 16:9 to 16:9(1920x1080)" but i noticed that now all my positioning* code was off, and the size of pictures and text was way too small. My problem now is, if I should just use the 16:9 aspect ratio…
The Crazy
  • 31
  • 7
-1
votes
1 answer

How to scale down an image on both width and height with respect to aspect ratio

How can I scale down an image on both width and height sides with respect to aspect ratio without using the object-fit property?
Dawid Krajewski
  • 324
  • 2
  • 15
-1
votes
1 answer

Google Lighthouse and SVGs with preserveAspectRatio="none"

Google Lighthouse has a red triangle error which significantly impacts the Best Practices score: Displays images with incorrect aspect ratio I can understand why this would be regarded as an error with fixed-dimension raster images (and also with…
Rounin
  • 27,134
  • 9
  • 83
  • 108
-1
votes
2 answers

How can I make overlay buttons that always stay over the same part of the picture that is under them?

I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles. Thing is, I would like those…
-1
votes
1 answer

How to add intro image beginning of video with same video aspect ratio in ffmpeg?

I have one image and one video. I would like to add image as video just before actual video so i can stream video with intro frame for 5 seconds. I found one command and full fill my requirement but in that command image added at the end of the…
Manoj Kag
  • 11
  • 2
-1
votes
1 answer

what is the formula of aspect ratio to set according to screen size

i want to set gridView in my List. And all gridView's child set according to screen size and aspectRatio.So how can i set aspecRation dynamically according to screen size. Thank You in Advance
-1
votes
1 answer

How resize a div height based on width with pure JavaScript

while resizing div change height based on width with constraint ratio @example div width:300 and height:600 next Ill change width to 400 height change to 800 based on width
-1
votes
1 answer

"Predict" video container height depending on aspect ratio

The use case is this: Suppose I got a service thats either responding with an error or with a video url to be played.If video is there, React will render the video , if not, the error. I would like to have a placeholder/error there in all…
Pan Chrono
  • 420
  • 3
  • 16
-1
votes
1 answer

Create Thumbnail according to aspect ratio of image while Upload Image with php

I want to create thumbnail while uploading image, i have created upload script.
Navneet
  • 1
  • 2
-1
votes
1 answer

set subViews with different width horizontal in a superview

I wanted to create 6 subviews in a view, which have different width & same height. It should fit horizontal, all screen resolutions for iPad and iPhone.Can anyone please help me on this.
RashmiG
  • 318
  • 1
  • 4
  • 11
-1
votes
1 answer

Increase aspect ratio according to screen size- iOS

A view at the bottom of a view controller with the following constraint: leading - 0 trailing - 0 bottom - 0 aspect ratio - 7:1 it looks good on small screen sizes, but on larger screen the view looks too small. What is the best way to increase the…
Ali Alebrahim
  • 617
  • 1
  • 9
  • 25
-1
votes
3 answers

CSS to create element with fixed ratio

I want to create an HTML page with: A fixed-width, full-height Navigation pane on the left A square element in the centre of the remaining area I want this square to be as big as possible, expanding to fill the area not taken up by the navigation…
James Newton
  • 6,623
  • 8
  • 49
  • 113