Tailwind CSS - Aspect Ratio


Tailwind CSS aspect ratio utilities allow us to control the aspect ratio of an element. Using these utility classes, we can define the desired width and height of an element.

Syntax

<element class="aspect-*">..<element>

Tailwind CSS Aspect Ratio Classes

Below mentioned classes can be used to control the aspect ratio of an element.

Class CSS Properties
aspect-auto aspect-ratio: auto;
aspect-square aspect-ratio: 1 / 1;
aspect-video aspect-ratio: 16 / 9;

Functionality of Aspect Ratio Classes

  • aspect-auto: This class replaces CSS aspect-ratio: auto property ensuring that it will retain its original proportion while adapting different screen sizes.
  • aspect-square: It replaces CSS aspect-ratio: 1 / 1 property ensuring that the element would remain square-shaped while adapting different screen sizes.
  • aspect-video: It replaces CSS aspect-ratio: 16 / 9 property ensures applying aspect ratio 16/9 for an embedded video element in a responsive manner.

Tailwind CSS Aspect Ratio Example

Below example will illustrate the Tailwind CSS aspect ratio classes.

Different Aspect Ratio Images

In the following example we will use all the aspect ratio classes to see the difference between them.

<!doctype html>
<html>

<head>
    <script src=
"https://cdn.tailwindcss.com?plugins=aspect-ratio">
    </script>
    <script>
        tailwind.config = {
            plugins: [
                require('@tailwindcss/aspect-ratio')
            ],
        }
    </script>
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS Aspect Ratio Class
    </p>
    <p>Tailwind CSS aspect-auto Class</p>
    <div class="aspect-auto">
        <img src=
"https://www.tutorialspoint.com/cg/images/logo.png" 
             alt="Tailwind CSS aspect-auto Class" />
    </div>

    <p>Tailwind CSS aspect-square Class</p>
    <div class="aspect-square">
        <img src=
"https://www.tutorialspoint.com/cg/images/logo.png" 
             alt="Tailwind CSS aspect-square Class" />
    </div>

    <p>Tailwind CSS aspect-video Class</p>
    <div class="aspect-video">
        <img src=
"https://www.tutorialspoint.com/cg/images/logo.png" 
             alt="Tailwind CSS aspect-video Class" />
    </div>
</body>

</html>

Supported Browsers

Class Chrome Edge Firefox Safari Opera
Aspect Ratio Yes Yes Yes Yes 15.0 Yes