Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Aspect Ratio

Quiz

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
Aspect Ratio	Yes	Yes	Yes	Yes 15.0	Yes

Print Page