Create DIV of a Given Aspect Ratio with CSS

css
Published on February 7, 2021

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.

Comments
Loading Comments