导语：我们经常会碰到这样的需求：要求div高度跟随宽度变化而变化。在手机端，一张图片作为div的背景图，图片宽高比不一致，并要求div宽高比与图片宽高比一致；怎么实现这种需求呢？
原理
padding-top: 50%;用这个属性的百分比，padding-top的百分比是相对于父元素的宽度，比如：父元素宽度100px，那子元素高度50%就是50px
<header></header> <style> .parent{ width: 120px; } .parent .child{ width: 100%; height: 0; padding-top: 50%; // 实际为60px } </style><body> <div class="parent"> <div class="child"></div> </div></body>继续阅读与本文标签相同的文章
上一篇 :
终于有人把云计算、大数据和人工智能讲明白了！
下一篇 :
一篇文章深入浅出带你了解mybatis
-
阿里云物联网软/硬件资源入口集合（持续更新）
2026-05-23栏目： 教程
-
python之bisect模块, 有序列表插入数据
2026-05-23栏目： 教程
-
Python-Django:no such table: main.auth_user__old
2026-05-23栏目： 教程
-
经验分享：5个可以轻松实践的高效工作秘诀
2026-05-23栏目： 教程
-
QuestMobile数据：移动互联网用户规模出现负增长 小程序成新亮点
2026-05-23栏目： 教程