具有固定纵横比动态子 div 的响应式 div

Question

Here 是一个 JSFiddle。我应用了适用于水平调整大小的padding trick。但是，它不适用于垂直调整大小。换句话说，我希望黄色 div 的高度为固定百分比，例如容器的 15%。但是黄色的纵横比应该保持不变。因此，如果我垂直调整大小（例如缩小），我的目标是减少黄色 div 的宽度以及高度，以便：1）保持纵横比。 2）保持黄色div的百分比宽度和高度。如果没有 JavaScript，这可能吗？如果可用，我可以使用任何 CSS3。

下面也是代码：

html, body {
  height: 100%; 
} 
.container {
 position: relative;
  left: 10%;
  width: 80%;
  height: 80%;
  top: 10%;
  background-color: maroon;
}
.content {
  background-color: yellow;
    width: 20%;
    padding-top: 10%;
    bottom: 0;
    position: absolute;
    left: 40%;
    /* height: 15%; of course this doesn't work */
} 

<div class="container">
  <div class="content"> 
        
  </div>
</div>

编辑：Here 是使用 jQuery 的所需行为的小提琴。这是代码：

$(window).resize(function () {
    $(".content").height($(".container").height() / 5);
    $(".content").width($(".container").width() / 5);
    if ($(".content").width() / $(".content").height() < 3) {
        $(".content").height($(".content").width() / 3);
    }
    else {
        $(".content").width($(".content").height() * 3);
    }
    $(".content").css("left", ($(".container").width() - $(".content").width()) / 2);
}).resize();

html, body {
  height: 100%; 
} 
.container {
 position: relative;
  left: 10%;
  width: 80%;
  height: 80%;
  top: 10%;
  background-color: maroon;
}
.content {
  background-color: yellow;
    bottom: 0;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="content"> 
        
  </div>
</div>

Answer 1

您可以使用媒体查询和视口尺寸。比如：

// I used 15vw just as an example, you should do some maths and find the correct ratio/breakpoint
// this makes the box react to the horizontal resize
@media (min-width: 15vw) { 
  .content {
    height: 12vw;
    width: 28vw;
  }
}

// now, at that breakpoint, the box size depends on the viewport's height
@media (max-height: 15vw) {
  .content {
    height: 80vh;
    width: 185vh;
  }
}

https://jsfiddle.net/f76p5nsr/

就我个人而言，我会尝试将 vh 和 vw 用于这些块的所有尺寸，这也将帮助您进行数学计算。