Aspect Ratio

Aspect ratio is typically denoted by two integers separated by a colon, representing width and height, such as x:y. Maintaining a precise ratio between the width and height of responsive elements on a webpage is occasionally needed.

RatioClass nameCopy code

• 1:1
  .aspect-1x1
  aspect-1x1Copy to Clipboard
• 2:1
  .aspect-2x1
  aspect-2x1Copy to Clipboard
• 3:1
  .aspect-3x1
  aspect-3x1Copy to Clipboard
• 4:3
  .aspect-4x3
  aspect-4x3Copy to Clipboard
• 16:9
  .aspect-16x9
  aspect-16x9Copy to Clipboard
• 21:9
  .aspect-21x9
  aspect-21x9Copy to Clipboard

Example

iFrame

Set an iframe to be 16x9, for instance for a video (resize the preview window and the iframe maintains ratio).