💅🏻 css

scss aspect-ratio mixin

(。θᗨθ。) 2024. 4. 2. 10:00
// @include aspect($w: 16, $h: 9);
@mixin aspect($w: 16, $h: 9) {
  aspect-ratio: #{$w} / #{$h};

  @supports not (aspect-ratio: #{$w} / #{$h}) {
      &::before {
          content: '';
          float: left;
          padding-top: calc((#{$h} / #{$w}) * 100%);
      }

      &::after {
          content: '';
          display: block;
          clear: both;
      }
  }
}
728x90