Object-fit

Object-fit utilities for media elements with module mixins for responsive modifiers.

Utilities (anchor)

Object-fit utility names and property values
Utility name	Property values
Single element
.object-contain	object-fit: contain
.object-cover	object-fit: cover
.object-fill	object-fit: fill
.object-scale-down	object-fit: scale-down
.object-none	object-fit: none
.object-initial	object-fit: initial
Child element
.child-object-contain	object-fit: contain
.child-object-cover	object-fit: cover
.child-object-fill	object-fit: fill
.child-object-scale-down	object-fit: scale-down
.child-object-none	object-fit: none
.child-object-initial	object-fit: initial

Responsive mixins (anchor)

Responsive modifier mixins are provided to include where required in custom breakpoints, the utilities available use the following modifier class naming convention:

.object-cover
.object-cover-xxl
.object-cover-xl
.object-cover-lg
.object-cover-md
.object-cover-sm
.object-cover-xs
.object-cover-xxs

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss

@use "stylemods/scss" as *;
@include object-fit-css;

// Example breakpoint
@media (width < 480px) {
  @include object-fit-sm-css;
}

See the using modules page for more information.

Using the framework (anchor)

Using the recommended custom setup enable the styles (and required breakpoints) in an overrides document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-object-fit:      true;
$enable-object-fit-sm:   true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information.

Source code (anchor)

The Object-fit source file is included with the layout module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source document: stylemods/scss/layout/object-fit.scss
View on Github: https://github.com/pmbrown/StyleMods/blob/main/scss/layout/object-fit.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.