1. Components
  2. aspect-ratio

Aspect Ratio

Displays content within a desired ratio.

Video/TV

Image by Johnnathan Tshibangu
<div class="w-4/5 aspect-video mxauto">
    <img src="/images/img2.webp" class="w-full h-full object-cover rd-lg" width="2400"
        alt="Image by Johnnathan Tshibangu">
</div>

Square

Aspect Square ,by Johnnathan Tshibangu
<div class="w-4/5 aspect-square mxauto">
    <img src="/images/img2.webp" class="w-full h-full object-cover rd-lg" width="2400"
        alt="Image by Johnnathan Tshibangu">
</div>

35mm film

aspect 35by Johnnathan Tshibangu
<div class="w-4/5 aspect-35mm-film mxauto">
    <img src="/images/img2.webp" class="w-full h-full object-cover rd-lg" width="2400"
        alt="aspect 35by Johnnathan Tshibangu">
</div>

Standard TV/Monitor

StandardTv,by Johnnathan Tshibangu
<div class="w-4/5 aspect-standard-tv mxauto">
    <img src="/images/img2.webp" class="w-full h-full object-cover rd-lg" width="2400"
        alt="StandardTv,by Johnnathan Tshibangu">
</div>

Ultrawide monitor

UltraWide,by Johnnathan Tshibangu
<div class="w-4/5 aspect-ultrawide mxauto">
    <img src="/images/img2.webp" class="w-full h-full object-cover rd-lg" width="2400"
        alt="UltraWide,by Johnnathan Tshibangu">
</div>