Jquery 以%为基础的高度保持特定比率？

所以我玩纵横比游戏是为了从我以前犯的一些错误中吸取教训，然后遇到了一些头痛的问题

在我的代码中，我的div的w/h比率是基于我的div的高度（可以是宽度，但拾取的高度）保留的，但是由于宽度为%，我的div的大小基于它打开的窗口的高度和宽度

我想做的是能够保持基于高度%的比率，但不让宽度根据窗口的大小而扭曲

我明白，要做到这一点，我不应该使用基于%的解决方案，但我似乎找不到一个单位或方法，可以做到这一点，而不搞砸div的大小

你知道我该怎么做吗

代码如下：

html，正文{
宽度：100%；
身高：100%；
}
#容器{
背景：红色；
宽度：26.25%；
身高：72.3%；
左边距：自动；
右边距：自动；
}
（功能（比率）{
$.fn.keepRatio=函数（其中）{
var$this=$（this）；
var w=$this.width（）；
var h=$this.height（）；
var比率=w/h；
$（窗口）。调整大小（函数（）{
开关（哪个）{
大小写“宽度”：
var nh=$this.width（）/比率；
$this.css（'height'，nh+'px'）；
打破
高度：
var nw=$this.height（）*比率；
$this.css（'width'，nw+'px'）；
打破
}
});
}
})（jQuery）；
$（函数（）{
$（'容器'）.keepRatio（'高度'）；
});

看一看：

---

我想你需要了解的是，在css中，100%通常意味着父维度。而且是主观的，可以改变..但是没有办法选择%代表什么。

只有在您愿意的情况下，才可以使用CSS来实现这一点

演示

---

您好向量，谢谢您的帮助，但填充顶部只影响宽度，如果我没记错的话。这意味着我不能在高度的情况下使用它，它不是…但我仍然不确定您要找的是什么…您想用浏览器y/n调整框的大小。你想让它随着纵横比调整大小。哦！我希望我的盒子总是有72.3%的高度，但宽度比总是一样的。这样，无论窗口大小，我的div将始终具有相同的外观，并且始终位于相同的位置。例如height=this.height但%是不可选择的，如果我理解正确的话，所以我不确定如何继续。好的，那么您希望高度以高度为基础，比如说以百分比表示的窗口…并且您希望宽度以该高度的比率/%为基础。这和说宽度=比率*（盒子的高度）是一样的，这和说宽度=比率*（%的窗户高度）是一样的。而在正常情况下，宽度的%表示其父容器的%。这是可行的，给我一秒钟。好了，完成了。。。。尝试调整浏览器的大小。哇，这正是我要找的。非常感谢你花时间帮助我提高了很多！

<div id="container">
</div>

html,body {
    width: 100%;
    height: 100%;
}
#container {
    background: red;
    width: 26.25%;
    height: 72.3%;
    margin-left: auto ;
    margin-right: auto ;
}
(function( $ratio ) {
  $.fn.keepRatio = function(which) {
      var $this = $(this);
      var w = $this.width();
      var h = $this.height();
      var ratio = w/h;
      $(window).resize(function() {
          switch(which) {
              case 'width':
                  var nh = $this.width() / ratio;
                  $this.css('height', nh + 'px');
                  break;
              case 'height':
                  var nw = $this.height() * ratio;
                  $this.css('width', nw + 'px');
                  break;
          }
      });

  }
})( jQuery );      

$(function(){
    $('#container').keepRatio('height');
});

var box= $('#container'),
    ratio= 0.363,
    height= 200;

box.height(height).width(height*ratio);

.wrapper:after {
    padding-top: 100%; /*Sets ratio*/
    display: block;
    content: '';
}