HTML自适应宽高比例容器怎么做？Aspect-ratio布局技巧-html教程-PHP中文网

aspect-ratio必须配合width或max-width才能生效，单独使用会因缺乏宽度基准导致容器塌陷或异常拉伸；需包裹在块级容器中，配合object-fit控制内容显示，并为旧版safari提供padding-top兜底。

html自适应宽高比例容器怎么做？aspect-ratio布局技巧

aspect-ratio 必须配合 width 才能生效

单独写 aspect-ratio: 16 / 9 几乎一定失效——浏览器没宽度基准，算不出高度，容器可能塌成一条线或撑满全屏。它不是“设了就定比例”，而是“有宽才按比算高”。

必须显式声明宽度，常见组合如下：

width: 100%：用于响应式卡片、列表项等父容器宽度明确的场景
max-width: 400px：加宽度上限，防大屏下过宽，同时保留自适应能力
width: 20rem 或 width: min(100%, 600px)：结合相对单位或函数更灵活

⚠️ 避免同时写 height: 100% 或 min-height: 200px——这些会直接覆盖 aspect-ratio 的高度计算逻辑，导致比例锁死失败。

video 容器不能直接给 `<video></video>` 设 aspect-ratio

浏览器对替换元素（<video></video>、<img>）的 aspect-ratio 支持极弱，Safari 和部分 Android WebView 会静默忽略。强行写在 <video></video> 标签上，调试工具里样式可能显示生效，但实际渲染高度仍是默认 300×150 或由内联 width/height 决定。

正确做法是套一层块级容器：

<div class="video-wrapper">
  <video src="demo.mp4" controls></video>
</div>

然后只对 .video-wrapper 设置：

width: 100%
aspect-ratio: 16 / 9（按视频原始比例调整，如 4/3、21/9）
overflow: hidden（防止 object-fit: cover 裁剪后边缘溢出）

<video></video> 自身只需：width: 100%; height: 100%; object-fit: cover; —— 它只负责填满这个已锁定比例的“框”。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

Safari 15.3 及更早必须降级用 padding-top

@supports (aspect-ratio: 1 / 1) 在 Safari 15.0–15.3 中检测会返回 true，但实际不渲染 aspect-ratio，属于静默兼容失败。真机测试必现塌陷，CLS（累计布局偏移）飙升。

稳妥 fallback 结构：

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 → 9 ÷ 16 = 0.5625 */
  height: 0;
}
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

注意两点：

百分比值必须手算：4:3 是 padding-top: 75%，1:1 是 100%，别混淆分子分母
不能把 aspect-ratio 和 padding-top 写进同一个选择器——现代浏览器会优先用 aspect-ratio，旧版 Safari 则依赖 padding-top + height: 0 的组合