takamoso / postcss-aspect-ratio-polyfill Goto Github PK

.width-based {
  display: inline-block;
  border: 1px solid blue;
  width: 80px;
}

.height-based {
  display: inline-block;
  border: 1px solid red;
  height: 80px;
}

.aspect-ratio-box::before {
  float: left;
  padding-top: 56.25%;
  content: '';
}
.aspect-ratio-box::after {
  display: block;
  content: '';
  clear: both;
}

.image-container-1 {
  aspect-ratio: 1 / 1
}
.image-container-2 {
  aspect-ratio: 1 / 1;
}

.image-container-1, .image-container-2 {
  aspect-ratio: 1 / 1;
}

.aspect-ratio-box {
  aspect-ratio: 16 / 9;
}

.card-wide {
    aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 1/1) {
  .aspect-ratio-box::before {
    float: left;
    padding-top: 56.25%;
    content: '';
  }
  .aspect-ratio-box::after {
    display: block;
    content: '';
    clear: both;
  }
}

.card-cell {
            --card-width: 1;
            --card-height: 1;
            aspect-ratio: calc(var(--card-width) / var(--card-height));
}

.card-cell::before {
    float: left;
    padding-top: calc(var(--card-width)NaN%var(--card-height));
    content: '';
}

.card-cell::before {
    float: left;
    padding-top: calc( calc(var(--card-width) / var(--card-height) ) * 100%);
    content: '';
}