CSS容器宽高比计算兼容性_在旧浏览器使用高度填充技巧-css教程-PHP中文网

ie11/edge legacy 不支持 aspect-ratio，需用 padding-top 百分比（如 56.25%）模拟宽高比，并配合 position: relative 与绝对定位内容；可用 @supports 安全降级，避免 ua 判断。

css容器宽高比计算兼容性_在旧浏览器使用高度填充技巧

宽高比容器在 IE11 / Edge Legacy 中不生效？用 `padding-top` 替代 `aspect-ratio`

现代 CSS 的 aspect-ratio 在 IE 和旧版 Edge（≤18）里完全不支持，连前缀都没得加。真要兼容，只能回到“伪宽高比”老办法：靠 padding-top 百分比触发高度自适应。

原理很简单：块级元素的 padding-top / padding-bottom 百分比值，是相对于其父容器宽度计算的——这个行为从 IE6 就稳定存在，反而是最可靠的“宽高比模拟器”。

必须把容器设为 position: relative，内部内容用 position: absolute 填满，否则 padding 会撑开布局
写法示例：padding-top: 56.25% 对应 16:9（9 ÷ 16 = 0.5625），padding-top: 75% 对应 4:3（3 ÷ 4 = 0.75）
别用 height: 0 配合 padding —— 在 IE11 下某些文档模式下可能塌陷，稳妥起见直接设 height: auto

`aspect-ratio` 和 `padding-top` 方案能混用吗？可以，但得靠 `@supports` 隔离

现代浏览器支持 aspect-ratio，旧浏览器 fallback 到 padding-top，两者共存没问题，关键是怎么安全切换。不能靠 UA 判断，得用特性检测。

@supports 是唯一靠谱的分界线，它在 IE 中被忽略（IE 不支持该规则，直接跳过），在 Edge 12+ 和 Chrome/Firefox 中正常工作。

先写旧方案（所有浏览器都执行）
再用 @supports (aspect-ratio: 1/1) 包裹新方案，覆盖旧逻辑
注意：不要写 @supports not (aspect-ratio: 1/1) —— 有些旧浏览器解析失败会整段丢弃，导致无样式

示例结构：

.container {
  position: relative;
  padding-top: 56.25%;
}
@supports (aspect-ratio: 1/1) {
  .container {
    padding-top: 0;
    aspect-ratio: 16/9;
  }
}

内容居中和响应式缩放为什么总出问题？因为 `padding-top` 容器不接受 `height` 控制

用 padding-top 模拟宽高比后，容器实际高度由宽度动态决定，这时候再设 height: 100% 或 max-height 很容易失效或冲突。

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

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

下载

常见症状：图片被裁切、文字溢出、媒体查询里尺寸突变。根本原因是高度已脱离常规流控，变成“宽度驱动型”。

内部绝对定位的内容，必须显式设 top: 0; left: 0; width: 100%; height: 100%，不能只靠 inset: 0（IE 不支持）
如果需要限制最大高度，改用 max-width + 媒体查询控制容器宽度，让 padding-top 自动缩放
视频/iframe 等替换元素，记得加 width: 100%; height: 100% 并设 object-fit: cover（IE 不支持，需用 width: 100%; height: auto + margin: auto 居中）