Crops toward focal point instead of center of image

crops-toward-focal-point.scss

// Cropping towards a focal point

/*
    This controls where the image is cropped toward as
    the design flows around it responsively.
    This would be the same as a focal point in photography.

    Original Idea: https://designshack.net/articles/mobile/focal-point-intelligent-cropping-of-responsive-images/
 */

.crops-toward-focal-point {
  &,
  img#{&},
  & img {
    object-position: var(--focal-left, 50%) var(--focal-top, 50%);

    // Optional CSS to get working quickly, but you might want to
    // move this stuff to other classes so this helper isn't so
    // opinionated
    // height: 100%;
    // width: 100%;
    // object-fit: cover;

    background-position: var(--focal-left, 50%) var(--focal-top, 50%);
  }
}

.focal-top {
  @for $i from 0 through 10 {
    $percent: $i * 10;

    &-#{$percent} {
      // 1% just converts it to percent
      // ex: 40 * 1% = 40%
      --focal-top: #{$percent * 1%};
    }
  }
}

.focal-left {
  @for $i from 0 through 10 {
    $percent: $i * 10;

    &-#{$percent} {
      // 1% just converts it to percent
      // ex: 40 * 1% = 40%
      --focal-left: #{$percent * 1%};
    }
  }
}