直接写 aspect-ratio 会闪动或失效，因其依赖父容器有明确宽度；ios 15.3 及更早版本完全不支持，导致高度为0；需用 padding-top fallback + @supports 双保险，并注意移动端平台特有兼容问题。
为什么直接写 aspect-ratio 会闪一下或失效
浏览器只在父容器有明确宽度（比如 width: 100% 或固定值）时，才用 aspect-ratio 推导高度；否则该属性压根不生效。常见失效场景包括：
– 父容器是 display: inline-block 且没设宽
– 外层用了 flex 但主轴没约束尺寸（比如漏写 flex: 1 或 width: 100%）
– 在微信小程序的 <swiper-item></swiper-item> 里直接套用，该组件默认不继承宽度
– iOS 15.3 及更早版本完全忽略 aspect-ratio，容器高度退化为 0，图片加载后突然撑开 → 明显下移抖动
如何写兼容性安全的占位结构
必须「双保险」：先用 padding-top fallback，再用 @supports 覆盖。关键点：
– padding-top 百分比 = 图片高 ÷ 宽 × 100%，例如 16:9 就是 padding-top: 56.25%
– 必须配合 position: relative 和子元素 position: absolute，否则 padding-top 不撑出视觉空间
– @supports (aspect-ratio: 1) 里要把 padding-top 设为 0，否则新旧规则共存会多出空白
– 别用 min-height 替代 padding-top —— 它不参与文档流占位，无法阻止后续内容上浮
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
.img-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* fallback for 16:9 */
}
@supports (aspect-ratio: 1) {
.img-container {
padding-top: 0;
aspect-ratio: 16 / 9;
}
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
移动端平台特有的坑（uni-app / 微信小程序）
这些平台对 aspect-ratio 支持滞后，且 <image></image> 组件自身不占位，光靠 CSS 不够：
– <image></image> 必须显式设置 width 和 height（rpx 或 px），不能只靠父容器撑开
– 优先用 placeholder 属性（uni-app 3.1+ 原生支持），值必须是本地路径，如 /static/placeholder.png
– @error 事件里替换 src 时，别直接改原始数据字段，用独立的 displayUrl 控制显示源，避免重试逻辑错乱
– mode 推荐用 aspectFit 或 scaleToFill，避免 widthFix 导致宽高不可控，破坏占位比例
占位之后怎么让加载过程不刺眼
光有高度预留还不够，用户看到的仍是透明或白底断层。真正影响体验的是「视觉跳变」：
– 直接给 img 写 background-color 没用，因为它是替换元素，未加载时没渲染区域
– 背景必须设在容器上，推荐用多层 linear-gradient 做渐变占位，比纯色更稳，且支持 transition
– 加载完成时靠 opacity 过渡：初始 img { opacity: 0; }，加载成功后加 class 切成 opacity: 1，过渡时间控制在 0.2s 内
– 注意 overflow: hidden 必须加在外层容器，防止图片略高时边缘露边
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
