直接给 img 或 video 加 aspect-ratio 会失效，因其是替换元素，自带固有尺寸，与 css aspect-ratio 冲突；safari 可能渲染空白，chrome 可能拉伸变形；正确做法是将 aspect-ratio 应用于外层容器并让子元素填满。

为什么直接给 img 或 video 加 aspect-ratio 会失效

因为它们是替换元素，自带固有尺寸（intrinsic size），和 aspect-ratio 冲突。Safari 可能渲染空白，Chrome 可能拉伸变形——尤其当没设 width 或 height 时。规范没强制要求替换元素服从该属性，所以浏览器行为不一致。正确做法永远是把比例逻辑放在外层容器上，再让子元素填满。

::before 撑高容器的硬性前提条件

不是加了伪元素就自动生效，必须同时满足：

• 父容器 必须设 position: relative，否则 ::before 的 position: absolute 会脱离预期上下文
• ::before 必须有 content: "" + display: block + padding-top: 56.25%（16:9 示例）
• 父容器**不能设固定 height**，否则会压制伪元素撑高的效果
• 真实内容（如 img）要用 position: absolute 填满，并显式加 object-fit: cover，否则可能溢出或留白
• 若父容器在 flex 或 grid 中，需确保其宽度可被明确解析——加 min-width: 0 或 width: 100%，否则百分比 padding 计算失效

iOS 15.3 及更早 Safari 中 ::before + padding-top 失效怎么办

这不是你代码写错了，而是旧版 WebKit 渲染引擎 Bug：百分比 padding 可能被忽略或算为 0。

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

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

下载

• 先检查父容器是否被 flex: 1 或 width: auto 导致“无明确宽度”——加 min-width: 0 或显式 width: 100%
• 避免在 ::before 上同时用 float 和 position: absolute，二者冲突
• 可临时 fallback 到 aspect-ratio（Safari 15.4+ 支持），或改用 vw 单位计算高度（如 height: calc(100vw * 9 / 16)）

用 background-image 还是 ::after？别绕远路

绝大多数带背景图的响应式容器，根本不需要伪元素。直接在容器上设：

• background-image + background-size: cover + background-position: center
• 配合 aspect-ratio: 16/9（现代浏览器）或 padding-bottom fallback

::after 只在需要独立缩放、遮罩、错位的装饰层时才有意义，比如渐变蒙版、徽章图标、或背景与内容分离的三重布局。多一层伪元素，就多一重定位控制、z-index 烦恼和渲染开销。

最常被忽略的一点：伪元素的 padding-top 是按父容器宽度算的，但这个“父容器宽度”本身得能被浏览器明确读出来——flex/grid 容器里没加 min-width: 0，它就算不出来。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！