Skip to main content

Horizontal aspect ratios

Available aspect ratios​

RatioCSS Class
1/1aspect-1-1
5/4aspect-5-4
4/3aspect-4-3
7/5aspect-7-5
3/2aspect-3-2
16/9aspect-16-9
2/1aspect-2-1
7/3aspect-7-3
21/9aspect-7-3
3-1aspect-3-1

Each aspect ratio base class has a class to go with each of the media query viewport sizes. For example:

aspect-3-2-3xs
aspect-3-2-2xs
aspect-3-2-xs
aspect-3-2-sm
aspect-3-2-md
aspect-3-2-lg
aspect-3-2-xl
aspect-3-2-1xl
aspect-3-2-3xl
aspect-3-2-4xl
aspect-3-2-5xl

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/aspect/horizontal.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/aspect/3xs/horizontal.css';
@import 'cacao-css/dist/aspect/2xs/horizontal.css';
@import 'cacao-css/dist/aspect/xs/horizontal.css';
@import 'cacao-css/dist/aspect/sm/horizontal.css';
@import 'cacao-css/dist/aspect/md/horizontal.css';
@import 'cacao-css/dist/aspect/lg/horizontal.css';
@import 'cacao-css/dist/aspect/xl/horizontal.css';
@import 'cacao-css/dist/aspect/2xl/horizontal.css';
@import 'cacao-css/dist/aspect/3xl/horizontal.css';
@import 'cacao-css/dist/aspect/4xl/horizontal.css';
@import 'cacao-css/dist/aspect/5xl/horizontal.css';

See Import Cacao CSS for more information.

Source CSS​

Default styles​

aspect/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

.aspect-1-1 {
    aspect-ratio: 1 / 1; /* 1.0:1 */
}

.aspect-5-4 {
    aspect-ratio: 5 / 4; /* 1.25:1 */
}

.aspect-4-3 {
    aspect-ratio: 4 / 3; /* 1.3:1 */
}

.aspect-7-5 {
    aspect-ratio: 7 / 5; /* 1.4:1 */
}

.aspect-3-2 {
    aspect-ratio: 3 / 2; /* 1.5:1 */
}

.aspect-16-9 {
    aspect-ratio: 16 / 9; /* 1.7:1 */
}

.aspect-2-1 {
    aspect-ratio: 2 / 1; /* 2:1 */
}

.aspect-7-3,
.aspect-21-9 {
    aspect-ratio: 7 / 3; /* 2.3:1 */
}

.aspect-3-1 {
    aspect-ratio: 3 / 1; /* 3.0:1 */
}

3xs styles​

aspect/3xs/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-3xs) {
    .aspect-1-1-3xs {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-3xs {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-3xs {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-3xs {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-3xs {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-3xs {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-3xs {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-3xs,
    .aspect-21-9-3xs {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-3xs {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

2xs styles​

aspect/2xs/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-2xs) {
    .aspect-1-1-2xs {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-2xs {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-2xs {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-2xs {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-2xs {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-2xs {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-2xs {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-2xs,
    .aspect-21-9-2xs {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-2xs {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

xs styles​

aspect/xs/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-xs) {
    .aspect-1-1-xs {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-xs {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-xs {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-xs {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-xs {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-xs {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-xs {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-xs,
    .aspect-21-9-xs {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-xs {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

sm styles​

aspect/sm/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-sm) {
    .aspect-1-1-sm {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-sm {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-sm {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-sm {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-sm {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-sm {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-sm {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-sm,
    .aspect-21-9-sm {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-sm {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

md styles​

aspect/md/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-md) {
    .aspect-1-1-md {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-md {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-md {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-md {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-md {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-md {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-md {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-md,
    .aspect-21-9-md {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-md {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

lg styles​

aspect/lg/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-lg) {
    .aspect-1-1-lg {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-lg {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-lg {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-lg {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-lg {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-lg {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-lg {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-lg,
    .aspect-21-9-lg {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-lg {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

xl styles​

aspect/xl/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-xl) {
    .aspect-1-1-xl {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-xl {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-xl {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-xl {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-xl {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-xl {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-xl {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-xl,
    .aspect-21-9-xl {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-xl {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

2xl styles​

aspect/2xl/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-2xl) {
    .aspect-1-1-2xl {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-2xl {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-2xl {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-2xl {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-2xl {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-2xl {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-2xl {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-2xl,
    .aspect-21-9-2xl {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-2xl {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

3xl styles​

aspect/3xl/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-3xl) {
    .aspect-1-1-3xl {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-3xl {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-3xl {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-3xl {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-3xl {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-3xl {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-3xl {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-3xl,
    .aspect-21-9-3xl {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-3xl {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

4xl styles​

aspect/4xl/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-4xl) {
    .aspect-1-1-4xl {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-4xl {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-4xl {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-4xl {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-4xl {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-4xl {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-4xl {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-4xl,
    .aspect-21-9-4xl {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-4xl {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}

5xl styles​

aspect/5xl/horizontal.css
/* =========================================================================== *\
    Horizontal aspect ratio utilities
\* =========================================================================== */

@media (--m-5xl) {
    .aspect-1-1-5xl {
        aspect-ratio: 1 / 1; /* 1.0:1 */
    }

    .aspect-5-4-5xl {
        aspect-ratio: 5 / 4; /* 1.25:1 */
    }

    .aspect-4-3-5xl {
        aspect-ratio: 4 / 3; /* 1.3:1 */
    }

    .aspect-7-5-5xl {
        aspect-ratio: 7 / 5; /* 1.4:1 */
    }

    .aspect-3-2-5xl {
        aspect-ratio: 3 / 2; /* 1.5:1 */
    }

    .aspect-16-9-5xl {
        aspect-ratio: 16 / 9; /* 1.7:1 */
    }

    .aspect-2-1-5xl {
        aspect-ratio: 2 / 1; /* 2:1 */
    }

    .aspect-7-3-5xl,
    .aspect-21-9-5xl {
        aspect-ratio: 7 / 3; /* 2.3:1 */
    }

    .aspect-3-1-5xl {
        aspect-ratio: 3 / 1; /* 3.0:1 */
    }
}