本文主要为大家分享一篇如何实现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等比例缩放高宽的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609813.html
微信扫一扫 
支付宝扫一扫 
