是否有一个高度衍生版本的CSS纵横比黑客?

var container = document.querySelector("#container");
var a = 0;
(function(){
  container.style.width = (100 + 25 * Math.cos(a)) + "px";
  container.style.height = (100 + 25 * Math.sin(a)) + "px";
  a += 0.01;
  setTimeout(arguments.callee, 4);
})();

#container {
  border:1px solid black;
}

#aspect_box {
  width:100%;
  padding-top:100%;
  background-color:rgba(255,0,0,0.5);
  position:relative;
}

#aspect_box:after {
  content:"1:1";
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

<div id="container"> <div id="aspect_box"></div> </div>