max-w-full + h-auto 是基础组合，因 max-w-full 防溢出、h-auto 保宽高比，缺一不可；响应式需结合断点前缀与 srcset/sizes 实现真正适配。
Tailwind CSS 本身不提供专门的“响应式图片”工具类，img 元素的响应式行为必须靠组合现有工具类手动实现，否则图片会溢出容器或失真。
为什么 max-w-full + h-auto 是基础组合
原生 img 在无样式时默认按原始尺寸渲染，超出父容器就会横向滚动。Tailwind 没有类似 Bootstrap 的 img-fluid 一键类，必须显式约束宽度和高度比例。
-
max-w-full让图片最大宽度不超过父容器（关键，防溢出） -
h-auto保持宽高比（不设固定h-值，否则拉伸变形） - 缺一不可：只加
max-w-full但没h-auto，在某些布局中仍可能因父元素height限制导致压缩
如何适配不同断点下的图片尺寸
响应式不是“让图片变小”，而是根据屏幕宽度调整其占位宽度，同时保持可读性与性能。Tailwind 的断点前缀直接作用于 max-w- 类即可。
- 手机优先：
max-w-full sm:max-w-md md:max-w-lg lg:max-w-xl - 避免写
max-w-xs这类极小值——它在大屏上反而让图片过窄、文字难读 - 慎用
object-fit类（如object-cover）：它会裁剪图片，仅适用于头图/卡片图等明确需要裁切的场景；普通内容图应保持object-contain或默认行为
加载优化：srcset 和 sizes 不能被 Tailwind 替代
Tailwind 只管样式，不处理资源加载逻辑。即使你用 max-w-2xl 把图片压到 500px 宽，浏览器仍可能下载 4K 原图 —— 这是性能隐患。
- 必须手写
srcset属性，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> - Tailwind 的
w-类（如w-1/2）无法替代sizes，后者告诉浏览器“这个img在各断点下大概占多宽”，才能选对分辨率资源 - 不要依赖
loading="lazy"代替srcset：懒加载只控制时机，不解决高清屏下加载大图的问题
真正麻烦的不是加几个 class，而是得同时维护样式层（Tailwind）、结构层（srcset/sizes）、内容层（图片裁切比例），三者稍有错位，用户看到的就是模糊图或布局跳动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
