利用padding-top百分比基于父容器宽度的特性，结合绝对定位，可创建16:9、4:3等比例响应式容器，常用于视频嵌入、图片画廊和卡片布局，实现内容等比缩放。
在CSS中，可以利用 padding-top 实现一个根据宽度自动调整高度的比例容器，常用于响应式设计中的图片容器、视频嵌入或卡片布局。
原理：padding-top 的百分比是相对于父元素的宽度
当设置 padding-top 为百分比时，它的值是基于包含块（父容器）的 宽度 计算的，而不是高度。这个特性可以用来创建一个与宽度成比例的高度。
通过让内容区域使用绝对定位，配合 padding-top 的比例，就能实现等比缩放的容器。
常见用法：创建 16:9 或 4:3 的比例容器
例如，要创建一个 16:9 的响应式容器：
立即学习“前端免费学习笔记（深入）”；
PHP5 和 MySQL 圣经
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。
466 查看详情 这里可以放视频、图片或其他内容
说明：
外层容器设置 position: relative 和 width: 100%padding-top: 56.25% 对应 16:9 比例（9 ÷ 16 = 0.5625）内部元素使用 absolute 填满整个容器
其他常用比例参考：
4:3 容器：padding-top: 75% （3 ÷ 4 = 0.75）1:1 正方形：padding-top: 100%21:9 超宽屏：padding-top: ~42.86% （9 ÷ 21 ≈ 0.4286）
实际应用场景
这种技巧广泛用于：
嵌入 YouTube 或 Vimeo 视频，保持比例不被拉伸响应式图片画廊，每个图项保持统一比例移动端适配的卡片组件
基本上就这些，不复杂但很实用。只需记住 padding-top 百分比依赖宽度，再配合绝对定位即可实现自适应比例高度。
以上就是在css中如何用padding-top实现比例高度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1009631.html
微信扫一扫 
支付宝扫一扫 
