如何在CSS中通过盒模型padding实现固定长宽比视频容器？-css教程-PHP中文网

必须设height: 0，因为padding-bottom百分比基于父宽计算，若不清除原始高度，会与内容撑高叠加导致比例失真；需配合position: relative和absolute实现子元素填满。

如何在css中通过盒模型padding实现固定长宽比视频容器？

直接用 padding-bottom + position: relative + position: absolute 就能稳住视频容器比例，不需要 JS，也不依赖现代 CSS 属性。

为什么必须设 `height: 0`？

因为 padding-bottom 的百分比是按父容器宽度算的，但如果不清掉原始高度，它会叠加在内容撑开的高度上，导致比例错乱。比如你写了 padding-bottom: 56.25%（对应 16:9），但容器里有文字或默认行高，实际高度 = 文字高度 + 56.25% 宽度 → 比例就崩了。

常见错误现象：padding-bottom 写了，视频还是被拉伸/压扁，或者顶部/底部多出空白。

必须加 height: 0 或 min-height: 0
父容器要有明确宽度（如 width: 100%、width: 400px），否则百分比无基准
子元素不能靠普通流式布局填充，否则会被 padding 挤出去

`padding-bottom` 值怎么算？

公式就是：宽高比的「高 ÷ 宽 × 100%」。浏览器不认冒号，只认数字，所以得手动换算。

常用值可以直接抄：

16:9 → padding-bottom: 56.25%（9 ÷ 16 = 0.5625）
4:3 → padding-bottom: 75%（3 ÷ 4 = 0.75）
1:1 → padding-bottom: 100%
21:9（超宽屏）→ padding-bottom: 42.857%（9 ÷ 21 ≈ 0.42857）

想动态算？可以用 calc(100% * 9 / 16)，但注意旧版 Safari 对 calc() 在 padding 中的支持不稳定，生产环境建议预计算好写死。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

子元素怎么填满这个“空盒子”？

外层靠 padding-bottom 撑出空间，但那块区域默认是“内边距”，不是内容区——所以子元素得脱离文档流，用 position: absolute 硬塞进去。

关键点：

外层容器必须设 position: relative，给绝对定位提供定位上下文
子元素要覆盖整个 padding 留出的空间：用 top: 0; left: 0; width: 100%; height: 100%
如果子元素是 <iframe></iframe> 或 <video></video>，记得加 display: block 防止底部留白（inline 元素默认 baseline 对齐）

示例结构：

.video-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}
.video-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}