如何實現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%

<strong>相关推荐：</strong><br/><a href="https://blog.csdn.net/majormayer/article/details/50731710" target="_self" style="font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px; text-decoration: underline;"><span style="font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;">创建一个宽高成比例的弹性div盒子</span></a><span style="font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;"><br/><a href="https://blog.csdn.net/u011558902/article/details/53259248" target="_self">理解CSS3中的background－size(对响应性图片等比例缩放)</a></span>

以上是如何實現div等比例縮放高寬的詳細內容。更多資訊請關注PHP中文網其他相關文章！