css實現自適應正方形的方法

標籤：class   css   str   寬度   變化   利用   實現   根據   比較   

頁面配置中，我們經常需要用百分比來實現寬度自適應，但是如果這時候高度要跟寬度呈固定比例變化，該怎麼辦呢？

很簡單，我們可以利用元素的padding或margin的百分比值是參照寬度的這一特性來實現，

即如果元素的padding或margin值是百分比值，那麼，它的值是根據父元素的寬度來計算的。

所以，實現一個自適應的正方形，可以有兩種寫法：

可以這麼寫：

 

1 <style>2     .box{3         width: 50%;4         padding-top: 50%;5         background-color: black;6     }7 </style>8 <div class="box"></div>

 

也可以這麼寫：

 1 <style> 2         .box{ 3             overflow: hidden; 4             width: 50%; 5             background-color: black; 6         } 7         .margin{ 8             margin-top: 100%; 9         }10     </style>11     <div class="box">12         <div class="margin"></div>13     </div>

兩種方法略有不同，大家可以自行比較，也可以腦洞一些其他方法。

收工！

 

css實現自適應正方形的方法