保持特定的比例與基於％的高度？

所以我玩的是縱橫比來學習我以前犯的一些錯誤，並遇到了一些頭痛的問題。保持特定的比例與基於％的高度？

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

來源

2014-02-19 Brennan Sei

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％表示通常是父母的維度。而且是主觀的，可以改變..而且沒有辦法選擇那個％代表什麼。

來源

2014-02-19 20:46:05

啊！感謝穆罕默德的回答，我想這是一個死衚衕，然後...... –

這不是......但我仍然不確定你在找什麼......你想要用瀏覽器調整大小框y/n。並希望它調整高寬比。 –

哦！我希望我的盒子總是有72.3％的高度，但寬度比例始終相同。這種方式無論窗口的大小，我的div總是具有相同的方面，並且始終處於相同的位置。就像height = this.height一樣，但如果我正確地選擇了％，那麼％是不可選擇的，所以我不確定如何繼續。 –

爲此，您可以使用CSS，如果您希望

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

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

來源

2014-02-19 20:47:41 Vector

你好矢量，感謝您的幫助，但是，如果我記得沒錯，填充頂隻影響寬度。這意味着我不能在高度的情況下使用它 –

保持特定的比例與基於％的高度？

回答

相關問題