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

另外，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>

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

1 个答案: