scss <img> mixin

img.scss

//img(0, 0, 100, 100, contain, 50%, 50%)
@mixin img(
  $x: 0, $y: 0, // 元素区坐标 x y
  $width: 100, $height: 100, // 元素区尺寸 w h
  $adaption: contain, // 适配方式 contain cover fill
  $horizontal: 50%, $vertical: 50% // 适配区对齐 m n
) {
  $v: 1080; // 适配区宽 v
  $g: 1920; // 适配区高 g

  position: absolute;
  @if($adaption == cover) {
    min-width: percentage($width/$v);
    min-height: percentage($height/$g);
    zoom: .1;
  }
  @else if($adaption == contain) {
    max-width: percentage($width/$v);
    max-height: percentage($height/$g);
    zoom: 10;
  }

  @if($adaption == fill) {
    width: 100%;
    height: 100%;
  }
  @else {
    left: $horizontal;
    top: $vertical;
    transform:
      translateX(percentage(($x - $horizontal/100%*$v)/$width))
      translateY(percentage(($y - $vertical/100%*$g)/$height));
  }
}