CSS vw和vh相对于父元素而不是视口

Question

我尝试创建一个固定宽高比的盒子，它会调整大小以避免溢出其父元素。

传统的padding-bottom技巧只能用父元素的宽度定义高度，而且在这里测试时，随着宽度的增加，元素会变得比父元素更高。 不好。

然而，使用vh和vw，我们可以实现所需的效果，但前提是父元素是视口的尺寸。 此处可进行测试。

<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的比例属性在哪里？

此外，图片具有某种内在比率，但我不确定如何利用它。

- Tet

---

我不明白为什么填充技巧对你来说不够好？它是一个固定的纵横比框。你是说你想要与父元素相同的视口比例吗？ - Donnie D'Amato

我希望该框被父元素的高度和宽度所限制。在任何一个维度上，它都不应该比父元素更大。 - Tet

Answer 1

你可以使用类似于我在维持固定高度的宽高比例中所做的方法，利用<canvas>元素的内在宽高比。但这里我们需要嵌套两个带有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>

- Oriol

---

啊，Chrome上不起作用。我猜元素需要强制重新渲染，但resize事件监听器只能在窗口上工作。但请注意，当您加载窗口时，它会独立于#resize的大小而工作。 - Oriol