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

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

经典填充底部技巧 https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css只能根据父宽度定义高度，并且可测试here http://jsfiddle.net/a4ofmryp/允许元素随着宽度的增加而变得比父元素更高。不好。

然而，使用 vh 和 vw，我们可以完成我们想要的任务，但限制父项是视口的尺寸。可测试here http://jsfiddle.net/7wk0aay8/.

<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 等效引用父级而不是视口？或者是否有一个补充的技巧可以解决 padding-bottom 技巧的问题？ css的ratio属性在哪里？

Also, 图像具有某种内在的比例 https://jsfiddle.net/p7qk5fvw/，但我不确定如何利用这一点。

你可以使用类似于我所做的事情保持纵横比和固定高度 https://stackoverflow.com/a/32425539/1529630，它利用了固有的纵横比<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>