liser/src/modules/aspect-ratios.css

functional css help to optimizing design work and building responsive websites

.aspect-ratio {
  height: 0;
  position: relative;
}

.aspect-ratio--16x9 {
  padding-bottom: 56.25%;
}
.aspect-ratio--9x16 {
  padding-bottom: 177.77%;
}

.aspect-ratio--4x3 {
  padding-bottom: 75%;
}
.aspect-ratio--3x4 {
  padding-bottom: 133.33%;
}

.aspect-ratio--6x4 {
  padding-bottom: 66.6%;
}
.aspect-ratio--4x6 {
  padding-bottom: 150%;
}

.aspect-ratio--8x5 {
  padding-bottom: 62.5%;
}
.aspect-ratio--5x8 {
  padding-bottom: 160%;
}

.aspect-ratio--7x5 {
  padding-bottom: 71.42%;
}
.aspect-ratio--5x7 {
  padding-bottom: 140%;
}

.aspect-ratio--1x1 {
  padding-bottom: 100%;
}

.aspect-ratio--object {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

@media screen and (min-width: 30em) {
  .aspect-ratio-ns {
    height: 0;
    position: relative;
  }
  .aspect-ratio--16x9-ns {
    padding-bottom: 56.25%;
  }
  .aspect-ratio--9x16-ns {
    padding-bottom: 177.77%;
  }
  .aspect-ratio--4x3-ns {
    padding-bottom: 75%;
  }
  .aspect-ratio--3x4-ns {
    padding-bottom: 133.33%;
  }
  .aspect-ratio--6x4-ns {
    padding-bottom: 66.6%;
  }
  .aspect-ratio--4x6-ns {
    padding-bottom: 150%;
  }
  .aspect-ratio--8x5-ns {
    padding-bottom: 62.5%;
  }
  .aspect-ratio--5x8-ns {
    padding-bottom: 160%;
  }
  .aspect-ratio--7x5-ns {
    padding-bottom: 71.42%;
  }
  .aspect-ratio--5x7-ns {
    padding-bottom: 140%;
  }
  .aspect-ratio--1x1-ns {
    padding-bottom: 100%;
  }
  .aspect-ratio--object-ns {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .aspect-ratio-m {
    height: 0;
    position: relative;
  }
  .aspect-ratio--16x9-m {
    padding-bottom: 56.25%;
  }
  .aspect-ratio--9x16-m {
    padding-bottom: 177.77%;
  }
  .aspect-ratio--4x3-m {
    padding-bottom: 75%;
  }
  .aspect-ratio--3x4-m {
    padding-bottom: 133.33%;
  }
  .aspect-ratio--6x4-m {
    padding-bottom: 66.6%;
  }
  .aspect-ratio--4x6-m {
    padding-bottom: 150%;
  }
  .aspect-ratio--8x5-m {
    padding-bottom: 62.5%;
  }
  .aspect-ratio--5x8-m {
    padding-bottom: 160%;
  }
  .aspect-ratio--7x5-m {
    padding-bottom: 71.42%;
  }
  .aspect-ratio--5x7-m {
    padding-bottom: 140%;
  }
  .aspect-ratio--1x1-m {
    padding-bottom: 100%;
  }
  .aspect-ratio--object-m {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .aspect-ratio-ml {
    height: 0;
    position: relative;
  }
  .aspect-ratio--16x9-ml {
    padding-bottom: 56.25%;
  }
  .aspect-ratio--9x16-ml {
    padding-bottom: 177.77%;
  }
  .aspect-ratio--4x3-ml {
    padding-bottom: 75%;
  }
  .aspect-ratio--3x4-ml {
    padding-bottom: 133.33%;
  }
  .aspect-ratio--6x4-ml {
    padding-bottom: 66.6%;
  }
  .aspect-ratio--4x6-ml {
    padding-bottom: 150%;
  }
  .aspect-ratio--8x5-ml {
    padding-bottom: 62.5%;
  }
  .aspect-ratio--5x8-ml {
    padding-bottom: 160%;
  }
  .aspect-ratio--7x5-ml {
    padding-bottom: 71.42%;
  }
  .aspect-ratio--5x7-ml {
    padding-bottom: 140%;
  }
  .aspect-ratio--1x1-ml {
    padding-bottom: 100%;
  }
  .aspect-ratio--object-ml {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
}

@media screen and (min-width: 60em) {
  .aspect-ratio-l {
    height: 0;
    position: relative;
  }
  .aspect-ratio--16x9-l {
    padding-bottom: 56.25%;
  }
  .aspect-ratio--9x16-l {
    padding-bottom: 177.77%;
  }
  .aspect-ratio--4x3-l {
    padding-bottom: 75%;
  }
  .aspect-ratio--3x4-l {
    padding-bottom: 133.33%;
  }
  .aspect-ratio--6x4-l {
    padding-bottom: 66.6%;
  }
  .aspect-ratio--4x6-l {
    padding-bottom: 150%;
  }
  .aspect-ratio--8x5-l {
    padding-bottom: 62.5%;
  }
  .aspect-ratio--5x8-l {
    padding-bottom: 160%;
  }
  .aspect-ratio--7x5-l {
    padding-bottom: 71.42%;
  }
  .aspect-ratio--5x7-l {
    padding-bottom: 140%;
  }
  .aspect-ratio--1x1-l {
    padding-bottom: 100%;
  }
  .aspect-ratio--object-l {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
}