响应式图片悬停展开需用CSS的max-width:100%、transform:scale()和transition实现，禁用width固定值；触摸设备应通过@media(hover:hover)隔离hover样式，并注意高DPR下图片分辨率与srcset适配。
响应式图片本身不支持“悬停展开”，得靠 CSS 控制尺寸和过渡
HTML 的 <img> 标签没有内置悬停展开逻辑，所谓“自适应展开”本质是：在保持响应式（即宽度随容器变化）的前提下，鼠标悬停时放大图片并平滑过渡。关键不在 HTML，而在 CSS 的 max-width、transform 和 transition 配合。
常见错误是直接给 <img> 设固定 width 或用 zoom（已废弃），导致在小屏下溢出或失真。正确做法是让图片始终「以容器为基准」缩放，悬停时仅通过 transform: scale() 局部放大，不破坏文档流。
- 必须给图片父容器设
overflow: hidden，否则放大后边缘会溢出 - 响应式基础：图片设
max-width: 100%+height: auto，禁用width: 100%（会拉伸非 1:1 图片） - 悬停效果用
transform: scale(1.2)比改width更性能友好，且不触发重排 - 过渡加在图片上，不是父容器：
transition: transform 0.3s ease-in-out
如何避免移动端误触和 Safari 缩放抖动
桌面端悬停在手机上会变成“首次点击触发 hover，再点才跳转”，体验割裂；Safari 还可能因 transform 触发页面重绘抖动。这不是 bug，是渲染机制差异。
- 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，让纯触摸设备直接忽略 - Safari 下添加
will-change: transform可缓解抖动（但别滥用，只加在需要的图片上） - 如果图片是链接，
<a>标签需加touch-action: manipulation减少 300ms 延迟 - 不要依赖
:hover做核心功能，比如图片信息必须能点击展开，不能只靠悬停显示
scale 放大后边缘模糊？检查图片分辨率和设备像素比
悬停放大时出现锯齿或发虚，通常不是 CSS 写错了，而是原始图片分辨率不足，或未适配高 DPI 屏幕。
立即学习“前端免费学习笔记（深入）”；
- 确保原图宽度 ≥ 目标最大展示宽度 × 2（例如最大展示 600px，原图至少 1200px）
- 用
srcset提供多倍图：<img src="a.jpg" srcset="a.jpg 1x, a@2x.jpg 2x"> -
transform: scale()在高 DPR 下仍会采样插值，若要求极致清晰，可配合image-rendering: -webkit-optimize-contrast（仅 WebKit 有效） - 避免对 PNG 透明背景图做大幅 scale，Alpha 通道插值容易泛白
要不要用 picture 元素？多数场景没必要
<picture> 解决的是「不同视口加载不同尺寸/格式图片」的问题，和悬停展开无关。强行套用反而增加复杂度。
- 仅当你要在悬停时切换更高清图（比如默认加载 800px 图，悬停时换成 1600px 图），才考虑用 JS 动态换
src，而非<picture> - 更轻量的做法：悬停时用
background-image切换高清背景图（适合装饰性图片） - 如果图片带
loading="lazy"，注意首次悬停时可能还没加载完，要加opacity过渡或 loading 占位
