在開發工具中修改寬度不會觸發調整大小事件

Question

var j = jQuery.noConflict(); 
j.fn.portionHeight = function(ratio){ 
    var width = j(this).width(); 
    var height = Math.floor(width*ratio); 
    j(this).height(height); 
} 

function initAndResize(){ 
    j('.square').portionHeight(1); 
} 

j(document).ready(function(){ 
    initAndResize(); 
    j('.square').resize(function(){ 
     initAndResize(); 
     console.log('changed'); 
    }) 
}); 

我正在使用JavaScript來保持DIV廣場。我正在調整廣場的尺寸，改變開發工具的寬度（以百分比表示），以查看最佳尺寸。我希望高度會相應改變，但事實並非如此。我認爲這是因爲在開發工具中通過CSS改變寬度時不會觸發「調整大小」事件，有什麼辦法可以克服這個問題嗎？

小提琴：http://jsfiddle.net/4og9d7m7/

Answer 1

這是不完全的回答你正在尋找可能，但我認爲這可能是有益的分享我最喜愛的CSS解決這個問題。

https://jsfiddle.net/sLsxcu9v/1/

填充底部設置爲相同的百分比作爲股利寬度和絕對定位的div裏面可能會或可能不適合的容器的充分程度是我一個很好的解決您的情況。

<div class="container"> 
    <div class="square"> 
     <div class="absolute"> 
      <h2>I'm still a square</h2> 
     </div> 
    </div> 
</div> 

div.container{ 

    width:50%;  

} 


div.square { 

    position:relative; 
    padding-bottom:100%; 
    background-color:red; 

} 

div.absolute { 

    position:absolute; 
    top:0px; 
    right:0px; 
    bottom:0px; 
    left:0px; 

} 

h2{ 

    color:white; 
    text-align:center; 
    width:100%; 

}