如何?div等比例縮放高寬

本文主要為大家分享一篇如何?div等比例縮放高寬，具有很好的參考價值，希望對大家有所協助。一起跟隨小編過來看看吧。

1,方案一:響應式來做,可以根據媒體查詢,設定在不同螢幕寬度下p的高度和寬度,具體的設定看你響應式想怎麼顯示

@media only screen and (min-width: 100px) and (max-width: 640px) {     div{width: 100px; height: 100px;         }}@media only screen and (min-width: 641px) and (max-width: 789px) {      div{width: 200px; height: 200px;          }}

2.方案二:百分比來做,這裡需要運用一個小技巧,padding用百分比做單位時是相對於容器的寬度來算的,所以你可以把高度設為0,內容自然溢出,
設定個padding-bottom
height:0;
width:50%;
padding-bottom:30%
那麼這個div的高寬比就是30%:50%

相關推薦：
建立一個寬高成比例的彈性div盒子
理解CSS3中的background－size(對響應性圖片等比例縮放)