javascript - 保持子 div 的宽高比与父级的高度和宽度变化

Question

我想创建一个 div，它在父级的高度和宽度变化时保持宽高比。

在上面的 gif 中，您可以看到当改变宽度时我能够保持盒子 div 的纵横比，但当改变父级的高度时我无法保持它。

.box {
  width: 100px;
  background-color: #dfdfdf;
  max-width: 100%;
}
.box:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 160%;
}
.wrap9 {
  width: 125px;
  height: 190px;
}

<div class="wrap9">
  <div class="box"></div>
</div>

我希望灰色框的行为如下所示:

Answer 1

使用默认的宽度和高度:

.box {
    width: 100px;
    background-color: #dfdfdf;
    max-width: 100%;
    max-height:100%;
}

.box:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 160%;
}

.wrap9 {
    width: 150px;
    height: 200px;
    border: 1px solid black;
}

<div class="wrap9">
       <div class="box"></div>
   </div>

宽度下宽度和高度:

.box {
    width: 100px;
    background-color: #dfdfdf;
    max-width: 100%;
    max-height:100%;
}

.box:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 160%;
}

.wrap9 {
    width: 100px;
    height: 120px;
    border: 1px solid black;
}

<div class="wrap9">
       <div class="box"></div>
   </div>

这是想要的效果吗？