Table of Contents

About

The Aspect Ratio is the ratio between the width and the height of an image (and therefore of video)

For a good responsive design (ie auto-scaling), aspect ratios (like 4:3, 3:2, 16:9 etc.) must be used rather than specifying a fixed width and height.

Well Knwon Ratio

16:9

A 16:9 aspect ratio means:

  • 16 inches width
  • 9 inches height

16:9 ratio images are more than 75% wider than section43 ratio images.

16:9 is usually done for wide angle.

The 16:9 ratios is best suited:

  • for taking photos that have higher width. Mostly
  • to take videos
  • to capture a wide picture more details of the scene.

This ratio is perfect for:

  • group photographs where number of objects is larger.
  • landscape
  • sort of panoramic

Since 2009, it has become the most common aspect ratio for televisions and computer monitors and is also the international standard format of digital television HDTV Full HD and SD TV

4:3

A 4:3 ratio is:

  • 4 inches width
  • 3 inches height

This ratio is most popular and default set in smartphones.

This ratio is perfect for:

  • portrait.
  • or a product

This ratio is bes suited when you want to take a picture of a single or lesser number of objects and want the focus to be on them.

1:1

This ratio can be used for clicking photos for whatsapp profile picture.

It gives you a square shaped photo outline.

Camera Sensor

Every image taken has an original ratio that is the camera sensor ratio that's generally but not always 4:3.

Snippet

Aspect ratio calculation in scss: 

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
) !default;