.wrapper{
  position : relative;
  background: #ccc;
  width: 10%;
  padding-bottom : 20%;
}
.inner{
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}


    
        這是內(nèi)容
    

    這是內(nèi)容

padding-top 在...上::before 偽元素使元素的高度等于其寬度的百分比。200% 因此表示元素的高度始終為200% 的寬度，創(chuàng)建一個(gè)響應(yīng)正方形。 此方法還允許內(nèi)容正常放置在元素內(nèi)部。

總結(jié)

二種方式實(shí)現(xiàn)的效果都一樣，大家可以試一下，調(diào)整瀏覽器窗口的大小以查看元素的比例保持不變。

個(gè)人推薦使用方法二，這樣可以減少div的嵌套。不過(guò)方法一的兼容更好

這里推薦一下我的前端技術(shù)分享群：731771211，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁(yè)，想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，有想學(xué)習(xí)web前端的，或是轉(zhuǎn)行，或是大學(xué)生，還有工作中想提升自己能力的，正在學(xué)習(xí)的小伙伴歡迎加入學(xué)習(xí)。

點(diǎn)擊： 加入