保持基于百分比高度的特定比例？答案

【问题标题】：keep a specific ratio with a % based height?保持基于百分比高度的特定比例？
【发布时间】：2014-03-20 10:34:55
【问题描述】：

所以我在玩纵横比以从我之前犯的一些错误中吸取教训，然后遇到了某种头痛。

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

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

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

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

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

【问题讨论】：

标签： jquery html css aspect-ratio

【解决方案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% 通常意味着父母的尺寸。并且是主观的并且可以改变..但是没有办法选择 % 代表什么。

【讨论】：

这不是...但我仍然不确定您在寻找什么...您希望框使用浏览器 y/n 调整大小。并且您希望它根据纵横比调整大小。
哦！我希望我的盒子总是有 72.3% 的高度，但宽度比总是相同的。这样，无论窗口大小如何，我的 div 都将始终具有相同的方面，并且始终位于同一位置。像 height = this.height 但如果我说对了则无法选择 % 所以我不确定如何继续。
好的，所以您希望高度基于百分比的窗口高度...并且您希望宽度基于该高度的比率/百分比。这与说 width= ratio*(heightOfBox) 相同，这与说 width= ratio*( % of window's height ) 相同。而在正常情况下，宽度的 % 表示其父容器的 %......它可以给我一秒钟。
好了，完成了.... jsfiddle.net/L9Srn/4/show 尝试调整浏览器的大小。 jsfiddle.net/L9Srn/4
哇，正是我想要的。非常感谢您的宝贵时间帮助我提高了很多！

【解决方案2】：

如果你愿意，你可以使用 CSS 来做到这一点

演示http://jsfiddle.net/kevinPHPkevin/5tzk3/307/

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

【讨论】：

你好 Vector，谢谢你的帮助，但是如果我没记错的话，padding-top 只会影响宽度。这意味着我不能在高度的情况下使用它