? ? 用js實現(xiàn)一個寬度自適應(yīng)，高度隨著寬度變化而變化的矩形，相信大家肯定都會。無非是js獲取一下元素寬度，然后再計算出相應(yīng)比例的高度，然后賦給元素，但是純css的實現(xiàn)更方便些，項目中需要某div寬度百分比，隨寬度的變化自適應(yīng)高度等于寬度，發(fā)現(xiàn)使用height：calc（width），不起作用，所以想到純css實現(xiàn)的辦法；

html代碼/css代碼如下圖：

? ? ? 我們來分析下是如何實現(xiàn)的，其中div容器包含兩個元素dummy和content，dummy是個空div，而content是我們正真要實現(xiàn)寬高等比例縮放的元素，div是塊元素，寬度會隨其內(nèi)容而撐開，所以只要讓高度隨寬度變化就行，不使用js的前提下，就是依賴dummy元素的屬性margin-top：100%來實現(xiàn)，margin-top的百分比是以父元素div的寬度為基準(zhǔn)，設(shè)置其為100%，則留出的高度就和div的寬度一樣，再設(shè)置content的定位到div上覆蓋div即可實現(xiàn)其高度隨寬度的百分比而變化；

? ? ? 此時content就是一個高度隨著寬度變化的正方形，當(dāng)然設(shè)置margin-top為75%，就是一個寬高比為4:3的長方形，但是使用時要注意，content定位absolute定位之后，會脫離默認文檔流，注意解決高度塌陷的問題。

元素，