Question

所以我正在玩宽高比，以便从我之前犯过的一些错误中吸取教训并遇到一些令人头痛的问题。

在我的代码中，我的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');
});

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％通常表示父母的维度。并且是主观的，可以改变......然而，没有办法选择％代表什么。

Answer 2

只有在您希望

时才能使用CSS执行此操作

DEMO http://jsfiddle.net/kevinPHPkevin/5tzk3/307/

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

保持特定比率与基于％的高度？

2 个答案: