现代浏览器支持aspect-ratio属性，Tailwind 3.3+提供aspect-square、aspect-video等工具类；需包裹img于div中并配合w-full和object-cover使用。
用 aspect-ratio 类直接设置宽高比（现代浏览器）
Chrome 110+、Firefox 119+、Safari 16.4+ 已原生支持 aspect-ratio CSS 属性，Tailwind 3.3+ 默认启用了对应工具类：aspect-square、aspect-video、aspect-[4/3] 等。
实际用法很简单：给 <img> 或其父容器加类即可。注意——<img> 本身不响应 aspect-ratio（因替换元素特性），所以必须套一层 <div>：
<div class="aspect-video w-full overflow-hidden"> <img src="photo.jpg" class="w-full h-full object-cover"> </div>
-
aspect-video等价于aspect-ratio: 16 / 9，不是固定像素尺寸，而是比例约束 - 必须配合
w-full或明确宽度，否则比例无意义 -
object-cover防止拉伸变形；若用object-contain，会留白但保持完整 - 旧版 Tailwind（theme.extend.aspectRatio 中添加自定义比例
兼容老浏览器：用 padding-top 技巧模拟宽高比
IE 和旧版 Safari 不支持 aspect-ratio，得靠“padding-top 百分比基于父容器宽度”这一特性实现。核心是让父容器高度由宽度推导而来。
典型结构：
立即学习“前端免费学习笔记（深入）”；
<div class="relative w-full" style="padding-top: 56.25%"> <!-- 16:9 = 9/16 = 56.25% --> <img src="photo.jpg" class="absolute inset-0 w-full h-full object-cover"> </div>
- padding-top 值 =
height / width × 100%，比如 4:3 →75%，1:1 →100% - 不能用 Tailwind 的
pt-px类替代，因为那些是固定像素值，不是相对宽度的百分比 - 必须用
absolute定位图片填满父容器，否则 padding 会撑出额外空白 - 如果图片需要懒加载或 SSR 渲染，此方案更稳定——不依赖 JS，且服务端可渲染
为什么不用 max-width + height: auto？
这是新手常试但无效的做法：<img src="x.jpg" class="max-w-full h-auto"> 看似能等比缩放，但它只控制最大宽度，不约束容器高度，无法实现“占位预留”——滚动时图片加载会导致页面跳动（layout shift）。
- 没有预设宽高比，浏览器无法提前分配空间，CLS（累积布局偏移）分数会变差
- 响应式断点切换时，
h-auto无法保证比例一致，尤其在 flex/grid 布局中易被挤压变形 - 如果图片缺失或加载失败，容器高度塌陷，UI 出现空白缺口
- 真正需要的是“容器有确定比例”，而不是“图片自己缩放”
响应式宽高比怎么切？
Tailwind 支持响应式前缀，但 aspect-[x/y] 类默认不带断点。想在不同屏幕用不同比例，得手动配置或组合类：
<div class="aspect-[4/3] sm:aspect-video md:aspect-[16/9] w-full"> <img src="..." class="w-full h-full object-cover"> </div>
- 确保你用的是 Tailwind 3.3+，否则
aspect-[x/y]不生效 - 自定义比例写法必须是
aspect-[num/den]（斜杠不能空格），如aspect-[21/9] - 不要混用
aspect-video和aspect-[16/9]，后者优先级更高，前者可能被覆盖 - 如果项目需大量不同比例，建议在
tailwind.config.js的theme.extend.aspectRatio里统一注册，避免硬编码
最易被忽略的一点：宽高比控制的是容器，不是图片本身；所有效果都建立在“容器有明确尺寸上下文”之上。没设宽度、没处理定位、没配 object-fit，再准的比例也会失效。
