shido/src/less/utility-classes/aspect-ratio.less

Build fast with Shido, a CSS framework for building custom designs without any annoying style or component you have to fight to override.

[class*='aspect-ratio-']:not(.aspect-ratio-item) {
  position: relative;

  &:before {
    content: "";
    display: block;
    width: 100%;
  }

  & > iframe,
  & > img,
  & > object,
  & > video {
    height: 100% !important;
    width: 100% !important;
  }

  & > .aspect-ratio-item {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.aspect-ratio-3\:2 {
  .mix-aspect-ratio(3,2);
}
.aspect-ratio-4\:3 {
  .mix-aspect-ratio(4,3);
}
.aspect-ratio-16\:9 {
  .mix-aspect-ratio(16,9);
}
.aspect-ratio-21\:9 {
  .mix-aspect-ratio(21,9);
}