jquery - 保持基于百分比的高度的特定比例？

Question

所以我在玩宽高比以从我以前犯的一些错误中吸取教训，但遇到了一些头痛的问题。

在我的代码中，我的 div 的 w/h 比率是基于我的 div 的高度(可以是宽度但选择高度)但是由于宽度是 %，我的 div 的大小是基于高度和它打开的窗口的宽度。

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

我知道这样做我不应该使用基于 % 的解决方案，但是我似乎无法找到一个单元或方法可以在不搞砸 div 大小的情况下做到这一点。

关于我应该如何进行的任何想法？

这是代码:http://jsfiddle.net/L9Srn/

<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');
});

Answer 1

http://jsfiddle.net/L9Srn/4/show/

看看: http://jsfiddle.net/L9Srn/4/

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

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

我认为您需要了解的是，在 css 中，100% 通常表示父级的尺寸。并且是主观的并且可以改变..但是没有办法选择 % 代表什么。