%의 높이로 특정 비율을 유지 하시겠습니까?

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/

를 살펴 보자 : 여기

코드입니다

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

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

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

내가 이해하는 데 필요한 모든 생각을되는 CSS를 100 % 수단에 대개 부모의 차원. 그리고 주관적이고 변경할 수 있습니다. 그리고 그 %가 나타내는 것을 선택할 방법이 없습니다.

Answer 2

당신은 당신이

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

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