Create DIV of a Given Aspect Ratio with CSS

The CSS aspect-ratio property makes it very easy to create containers of a given aspect ratio.

This property is highly useful while maintaining responsiveness for multiple screen sizes.

aspect-ratio needs to be specified as a ratio of width / height.

• Create a box of 16/9 aspect ratio.

  /* pixels */
  div {
  	width: 400px;
  	aspect-ratio: 16/9;
  }
  
  /* percentage */
  div {
  	width: 100%;
  	aspect-ratio: 16/9;
  }
  

• Create a box of 4/3 aspect ratio.

  div {
  	width: 100%;
  	aspect-ratio: 4/3;
  }
  

• Create a box of equal width & height (aspect ratio 1/1).

  div {
  	width: 100%;
  	aspect-ratio: 1/1;
  }
  

Browser Compatibility

aspect-ratio is currently supported in Chrome & Edge.