獲取元素的寬度並使用它來設置其高度

我使用Bootstrap的網格系統，並將寬度設置爲90％。獲取元素的寬度並使用它來設置其高度

問題是我該如何設置 accrodingly的高度？例如，我想要一個16：9的大小。但我不知道我怎樣才能得到的寬度值

代碼可能看起來像：

iframe 
width: 90% 
height: $(width)*9/16

2013-07-12 cqcn1991

我認爲你可能需要使用javascript這個 – Pete

是的，我認爲它可以用js來完成。但我覺得這種事情應該用css來完成，因爲它的寬度和高度...... – cqcn1991

這可以使用純CSS完成，它被稱爲intrinsic ratios。它需要做數學運算，但通過SASS和Compass，你可以說出你想要的結果！：d

你需要的包裝：

<div class=iframe-container> 
    <iframe></iframe> 
</div>

SASS +指南針：

@import toolkit 

.iframe-container 
    +intrinsic-ratio(16/9, 90%)

正如你所看到的，真棒Toolkit北斗擴展用於。

2013-07-12 09:22:14

如果你展示*爲什麼這會按照它的方式工作，這對未來的用戶會有所幫助。 'toolkit'從哪裏來？ – cimmanon

我有：1.給出了一個非常詳細的內在比率概念解釋的鏈接，2.提供了一個鏈接到工具包的主頁和其固有比率mixin的文檔，3.注意到Toolkit是一個Compass擴展，4 。創建了SassBin，並用它來共享顯示CSS代碼的演示。在我的回答中沒有涵蓋這個主題上的任何內容嗎？ –

使用jQuery：

$('.iframe').height($('.iframe').width()*(9/16));

確保你有一個js文件雖然

2013-07-12 08:37:30

男人，那傢伙打敗了我，但他是對的你可以用JQuery做到這一點

$(document).ready(function() { 
    $('iframe').height(function() { 
     return $(this).width()*(9/16); 
    }); 
});

2013-07-12 08:39:19 Michael

回答