CSS vw 和 vh 但相对于父级而不是视口

Question

我正在尝试创建一个固定的纵横比框，它可以调整大小以不溢出其父级。

经典的padding-bottom trick 只能根据父级宽度定义高度，而可测试的here 允许元素随着宽度的增加而变得比父级更高。不好。

然而，使用 vh 和 vw，我们可以在父级是视口尺寸的限制下完成我们想要的。可测试here。

<style>
  div {
    max-width: 90vw;
    max-height: 90vh;
    height: 50.625vw; /* height defined in terms of parent width (90*9/16) */
    width: 160vh; /* width defined in terms of parent height, which is missing from the padding-bottom trick (90*16/9) */
    background: linear-gradient(to right, gray, black, gray);
  }
</style>

<div></div>

有没有办法让 vh 和 vw 等价物引用父级而不是视口？或者对于解决其问题的填充底部技巧是否有一个补充技巧？ css ratio 属性在哪里？

另外，images have some sort of intrinsic ratio，但我不确定如何利用这一点。

Answer 1

您可以使用类似于我在 Maintain aspect ratio with a fixed height 中所做的事情，它利用了 <canvas> 元素的固有纵横比。

但是这里我们需要带有两个画布的嵌套容器。

#resize {
  resize: both;
  overflow: auto;
  width: 100px;
  height: 140px;
  padding: 20px;
  border: 1px solid black;
}
.ratio {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.ratio.vertical, .ratio.vertical > canvas {
  height: 100%;
  max-width: 100%;
}
.ratio.horizontal, .ratio.horizontal > canvas {
  width: 100%;
  max-height: 100%;
}
.ratio > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#contents {
  background: linear-gradient(to right, gray, black, gray);
}

<div id="resize">
  <div class="ratio vertical">
    <canvas width="16" height="9"></canvas>
    <div>
      <div class="ratio horizontal">
        <canvas width="16" height="9"></canvas>
        <div id="contents">
          Hello
        </div>
      </div>
    </div>
  </div>
</div>