Question

我知道设置宽度的那个，您可以使用顶部/底部填充来保持一定的宽高比

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>

但是在我的情况下，我需要设置高度，并且宽度是可变的。我什至不了解保持宽高比的顶部/底部边距背后的逻辑，但使用左侧/右侧边距的工作方式不同。

无论如何，是否有CSS可以将宽高比固定在容器的高度上？

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

0 个答案: