Skip to main content

Object ft

This provides styles for setting the object-fit style for elements.

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

fit-cover-3xs
fit-cover-2xs
fit-cover-xs
fit-cover-sm
fit-cover-md
fit-cover-lg
fit-cover-xl
fit-cover-1xl
fit-cover-3xl
fit-cover-4xl
fit-cover-5xl

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/fit/fit.css';

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS​

Default styles​

fit/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

.fit-cover {
    object-fit: cover;
}

.fit-contain {
    object-fit: contain;
}

3xs styles​

fit/3xs/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-3xs) {
    .fit-cover-3xs {
        object-fit: cover;
    }

    .fit-contain-3xs {
        object-fit: contain;
    }
}

2xs styles​

fit/2xs/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-2xs) {
    .fit-cover-2xs {
        object-fit: cover;
    }

    .fit-contain-2xs {
        object-fit: contain;
    }
}

xs styles​

fit/xs/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-xs) {
    .fit-cover-xs {
        object-fit: cover;
    }

    .fit-contain-xs {
        object-fit: contain;
    }
}

sm styles​

fit/sm/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-sm) {
    .fit-cover-sm {
        object-fit: cover;
    }

    .fit-contain-sm {
        object-fit: contain;
    }
}

md styles​

fit/md/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-md) {
    .fit-cover-md {
        object-fit: cover;
    }

    .fit-contain-md {
        object-fit: contain;
    }
}

lg styles​

fit/lg/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-lg) {
    .fit-cover-lg {
        object-fit: cover;
    }

    .fit-contain-lg {
        object-fit: contain;
    }
}

xl styles​

fit/xl/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-xl) {
    .fit-cover-xl {
        object-fit: cover;
    }

    .fit-contain-xl {
        object-fit: contain;
    }
}

2xl styles​

fit/2xl/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-2xl) {
    .fit-cover-2xl {
        object-fit: cover;
    }

    .fit-contain-2xl {
        object-fit: contain;
    }
}

3xl styles​

fit/3xl/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-3xl) {
    .fit-cover-3xl {
        object-fit: cover;
    }

    .fit-contain-3xl {
        object-fit: contain;
    }
}

4xl styles​

fit/4xl/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-4xl) {
    .fit-cover-4xl {
        object-fit: cover;
    }

    .fit-contain-4xl {
        object-fit: contain;
    }
}

5xl styles​

fit/5xl/fit.css
/* =========================================================================== *\
   Object fit utilities
\* =========================================================================== */

@media (--m-5xl) {
    .fit-cover-5xl {
        object-fit: cover;
    }

    .fit-contain-5xl {
        object-fit: contain;
    }
}