本文主要為大家分享一篇如何實現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中文網其他相關文章！
