ancient-css/src/properties/ratio.css

ANCIENT-CSS A CSS utility library

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

.ratio-4x3 {
  padding-bottom: 75%;
}

.ratio-16x10 {
  padding-bottom: 62.5%;
}

.ratio-16x9 {
  padding-bottom: 56.25%;
}

.ratio-2x1 {
  padding-bottom: 50%;
}

@media (min-width: 768px) {
  .sm\:ratio-1x1 {
    padding-bottom: 100%;
  }

  .sm\:ratio-4x3 {
    padding-bottom: 75%;
  }

  .sm\:ratio-16x10 {
    padding-bottom: 62.5%;
  }

  .sm\:ratio-16x9 {
    padding-bottom: 56.25%;
  }

  .sm\:ratio-2x1 {
    padding-bottom: 50%;
  }
}

@media (min-width: 1024px) {
  .md\:ratio-1x1 {
    padding-bottom: 100%;
  }

  .md\:ratio-4x3 {
    padding-bottom: 75%;
  }

  .md\:ratio-16x10 {
    padding-bottom: 62.5%;
  }

  .md\:ratio-16x9 {
    padding-bottom: 56.25%;
  }

  .md\:ratio-2x1 {
    padding-bottom: 50%;
  }
}

@media (min-width: 1280px) {
  .lg\:ratio-1x1 {
    padding-bottom: 100%;
  }

  .lg\:ratio-4x3 {
    padding-bottom: 75%;
  }

  .lg\:ratio-16x10 {
    padding-bottom: 62.5%;
  }

  .lg\:ratio-16x9 {
    padding-bottom: 56.25%;
  }

  .lg\:ratio-2x1 {
    padding-bottom: 50%;
  }
}