fractal-starter/src/_aspectratios.scss at develop · correasebastian/fractal-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@mixin embed-base() {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    &:before{
        display: block;
        content: "";
    }
}

@mixin embed-fill() {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.tcs-embed-fill{
    @include embed-fill();
}

@include media-breakpoint-up(md) {
    .tcs-embed-responsive-md {
        @include embed-base();
    }
    .tcs-embed-fill-md {
        @include embed-fill();
    }
}

@include media-breakpoint-up(lg) {
    .tcs-embed-responsive-lg {
        @include embed-base();
    }
    .tcs-embed-fill-lg {
        @include embed-fill();
    }
}

$aspectratios: (1440: 560, 375: 300, 335: 188 );


@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

      @each $w, $h in $aspectratios {
        //   .tcs-embed-responsive-sm-1440by560
        .tcs-embed-responsive#{$infix}-#{$w}by#{$h}:before {
          padding-top: ($h*100/$w)* 1%;
        }
      }

    }
}


.img-fit{
    object-fit: cover;
}