CSS自適應長寬比

aspect-ratio.css

/* aspect-ratio */
/* <div class="aspect-ratio" style="--width: 16; --height: 9;"> */
.aspect-ratio {
  position: relative;
  box-sizing: border-box;
}
.aspect-ratio > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; 
  left: 0; 
  box-sizing: border-box;
}
.aspect-ratio::before {
  position: relative;
  display: block;
  content: "";
  padding-top: calc(var(--height, 1) / var(--width, 1) * 100);
  box-sizing: border-box;
}