本文主要为大家分享一篇如何实现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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
941
收藏
