? ? 用js實現一個寬度自適應，高度隨著寬度變化而變化的矩形，相信大家肯定都會。無非是js獲取一下元素寬度，然后再計算出相應比例的高度，然后賦給元素，但是純css的實現更方便些，項目中需要某div寬度百分比，隨寬度的變化自適應高度等于寬度，發現使用height：calc（width），不起作用，所以想到純css實現的辦法；
html代碼/css代碼如下圖：
? ? ? 我們來分析下是如何實現的，其中div容器包含兩個元素dummy和content，dummy是個空div，而content是我們正真要實現寬高等比例縮放的元素，div是塊元素，寬度會隨其內容而撐開，所以只要讓高度隨寬度變化就行，不使用js的前提下，就是依賴dummy元素的屬性margin-top：100%來實現，margin-top的百分比是以父元素div的寬度為基準，設置其為100%，則留出的高度就和div的寬度一樣，再設置content的定位到div上覆蓋div即可實現其高度隨寬度的百分比而變化；
? ? ? 此時content就是一個高度隨著寬度變化的正方形，當然設置margin-top為75%，就是一個寬高比為4:3的長方形，但是使用時要注意，content定位absolute定位之后，會脫離默認文檔流，注意解決高度塌陷的問題。
元素，
