Ratios | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Ratios

##### Aspect Ratios

Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:`[ratio-1x1 / ratio-4x3 / ratio-16x9 / ratio-21x9]`.

    <div class="grid grid-cols-12 gap-4">
     <div class="col-span-3 lg:col-span-12">
       <div class="ratio ratio-1x1">
         <iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
       </div>
     </div>
     <div class="col-span-3 lg:col-span-12">
       <div class="ratio ratio-4x3">
         <iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
       </div>
     </div>
     <div class="col-span-3 lg:col-span-12">
       <div class="ratio ratio-16x9">
         <iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
       </div>
     </div>
     <div class="col-span-3 lg:col-span-12">
       <div class="ratio ratio-21x9">
         <iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
       </div>
     </div>
    </div>

##### Custom Ratio

Wrap any embed, like an `<iframe>` , in a parent element with `ratio` and an aspect `ratio` class. Here is a breakdown of these ratios:`ratio-4x3`.

    <div class="ratio ratio-4x3">
     <iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
    </div>

##### Default Ratio

Wrap any embed, like an `<iframe>` , in a parent element with `ratio` and an aspect`ratio` class. Here is a breakdown of these ratios:`16x9 ratio`.

    <div class="ratio ratio-16x9">
     <iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
    </div>