? ? 用js實現(xiàn)一個寬度自適應刺桃，高度隨著寬度變化而變化的矩形卷哩，相信大家肯定都會。無非是js獲取一下元素寬度桶错，然后再計算出相應比例的高度航唆，然后賦給元素，但是純css的實現(xiàn)更方便些院刁，項目中需要某div寬度百分比糯钙，隨寬度的變化自適應高度等于寬度，發(fā)現(xiàn)使用height：calc（width）黎比，不起作用超营，所以想到純css實現(xiàn)的辦法；
html代碼/css代碼如下圖：
? ? ? 我們來分析下是如何實現(xiàn)的阅虫，其中div容器包含兩個元素dummy和content演闭，dummy是個空div，而content是我們正真要實現(xiàn)寬高等比例縮放的元素颓帝，div是塊元素米碰，寬度會隨其內容而撐開，所以只要讓高度隨寬度變化就行购城，不使用js的前提下吕座，就是依賴dummy元素的屬性margin-top：100%來實現(xiàn)，margin-top的百分比是以父元素div的寬度為基準瘪板，設置其為100%吴趴，則留出的高度就和div的寬度一樣，再設置content的定位到div上覆蓋div即可實現(xiàn)其高度隨寬度的百分比而變化侮攀；
? ? ? 此時content就是一個高度隨著寬度變化的正方形锣枝，當然設置margin-top為75%厢拭，就是一個寬高比為4:3的長方形，但是使用時要注意撇叁，content定位absolute定位之后供鸠，會脫離默認文檔流，注意解決高度塌陷的問題陨闹。
元素楞捂，
