仅设 aspect-ratio: 1/1 时缩略图无高度，因其仅推导高度而不设定尺寸，必须配合 width: 100% 或 max-width: 100% 等明确宽度约束，且父容器需有可计算宽度、不被 flex 压缩。
直接用 aspect-ratio + object-fit 就能实现固定比例缩略图，但必须确保父容器宽度可控、不被 flex 压缩，且 iOS Safari ≤15.3 需降级。
为什么只写 aspect-ratio: 1 / 1 缩略图没高度？
它不设定尺寸，只推导高度，所以必须搭配明确的宽度约束：
-
width: 100%最常用，但要求父容器有可计算宽度（比如非flex下未设flex-shrink: 0） -
max-width: 100%更安全，防窄屏溢出，尤其图文混排时 - 不能同时写
height: 200px—— 会直接忽略aspect-ratio - Flex 容器中若子项是
img，默认align-items: stretch会强行拉高，加align-self: center修复
object-fit 必须配对使用，否则图片会留白或变形
aspect-ratio 只管“框”的比例，不管图怎么放：
-
object-fit: cover：等比缩放+裁切，填满无留白，适合封面、轮播缩略图 -
object-fit: contain：等比缩放+完整显示，四周可能留白，适合头像类缩略图 - 别用
object-fit: fill，必然拉伸失真 - iOS Safari 9.3–15.3 需加
-webkit-object-fit: cover，Autoprefixer 要配safari >= 9
iOS Safari 15.3 及更早版本必须回退到 padding-bottom 方案
因为 aspect-ratio 在这些版本中静默失效，高度直接坍缩：
- 外层容器设
position: relative; padding-bottom: 100%（1:1）、75%（4:3）或56.25%（16:9） -
img设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 必须加
object-fit: cover或contain，否则图片会拉伸 - DOM 多一层包裹，且无法响应图片加载后的真实尺寸变化
真正容易被忽略的是 viewport 和 inline 元素间隙
没配好 <meta name="viewport" content="width=device-width, initial-scale=1.0">，所有缩放都会跑偏；<img> 默认是 inline 元素，底部自带约 4px 空隙，加 display: block 消除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
