CSS - aspect-ratio Property

Quiz

CSS aspect-ratio property defines the desired width-to-height ratio of an element's box. This property is helpful when the size of parent container or viewport changes, the browser will re-adjust the dimensions of the element, in order to maintain the width-to-height ratio.

Syntax

aspect-ratio: auto | number (width) / number (height) | initial | inherit;

Property Values

Value	Description
auto	It specifies that no specific ratio is set.
number / number	The first number specifies the width and second number specifies the height of the aspect ratio. If no number is specified 1 is taken as default.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Aspect Ratio Property

The following examples explain the aspect-ratio property with different values.

Apect Ratio with Auto Value

If no specific width to ratio is to be maintained, we can simply use auto value which specifies that no strict width to height ratio is to be imposed. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid red;
         width: 300px;
         aspect-ratio: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS aspect-ratio Property
   </h2>
   <img src="/css/images/orange-flower.jpg" alt="flower-image">
</body>

</html>

Aspect Ratio with Width and Height Values

To maintain a fixed width to height ratio, we can specify the width and height values. If height value is not mentioned, it will be taken as 1. The following example shows different aspect ratios.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div img {
         display: block;
         margin: 15px;
      }

      #img1 {
         border: 5px solid red;
         width: 300px;
         aspect-ratio: 1/1;
      }

      #img2 {
         border: 5px solid red;
         width: 300px;
         aspect-ratio: 4/3;
      }

      #img3 {
         border: 5px solid red;
         width: 300px;
         aspect-ratio: 16/9;
      }
   </style>
</head>

<body>
   <h2>
      CSS aspect-ratio Property
   </h2>
   <div>
      <label>Square size (1:1) aspect ratio</label>
      <img src="/css/images/orange-flower.jpg" 
      alt="flower-image" id="img1">
      <label>Standard size (4:3) aspect ratio</label>
      <img src="/css/images/orange-flower.jpg" 
      alt="flower-image" id="img2">
      <label>Widescreen size (16:9) aspect ratio</label>
      <img src="/css/images/orange-flower.jpg" 
      alt="flower-image" id="img3">
   </div>

</body>

</html>

Supported Browsers

Property
aspect-ratio	88	88	89	15	74

css_reference.htm

Print Page