Sass mixin to customize object fit and position. Visit blog posts https://bit.ly/3bg4Rqs

object.scss

// _object.scss
@mixin object($uid: object) {
  $fit: (
    '-contain': contain,
    '-cover': cover,
    '-fill': fill,
    '-none': none,
    '-scale-down': scale-down
  );
  @each $prop, $value in $fit {
    .#{$uid}#{$prop} {
      object-fit: $value;
    }
  }
  $pos: (
    '-top': top,
    '-right': right,
    '-bottom': bottom,
    '-left': left,
    '-center': center,
    '-right-bottom': (right, bottom),
    '-right-top': (right, top),
    '-left-bottom': (left, bottom),
    '-left-top': (left, top)
  );
  @each $prop, $value in $pos {
    @if length($value) == 2 {
      .#{$uid}#{$prop} {
        object-position: #{nth($value, 1)} #{nth($value, 2)};
      }
    } @else {
      .#{$uid}#{$prop} {
        object-position: $value;
      }
    }
  }
}