img直接加transition会失效，因其默认为内联元素，需显式设display: block或inline-block；必须配合transform-origin: center、父容器overflow: hidden及transition: transform 0.3s ease-out才可稳定生效。
img标签直接加CSS transition会失效？
直接给 <img alt="HTML如何实现响应式图片悬停放大动效" > 写 transform: scale(1.2) + transition，悬停时大概率没反应——因为默认情况下 <img alt="HTML如何实现响应式图片悬停放大动效" > 是内联元素，transform 对内联元素不生效（除非显式设 display: block 或 inline-block）。
实操建议：
- 给
<img alt="HTML如何实现响应式图片悬停放大动效" >加display: block或display: inline-block - 放大必须配合
overflow: hidden的父容器，否则放大会撑开布局或溢出 - 别只写
transition: transform 0.3s，补上ease-out避免生硬（transition: transform 0.3s ease-out）
用 picture + srcset 还能触发悬停放大吗？
能。响应式图片的核心是 <picture></picture> 和 srcset，它们只管资源选择逻辑；悬停动效由 CSS 控制，两者互不干扰。
但要注意：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
<picture></picture>内的<img alt="HTML如何实现响应式图片悬停放大动效" >仍是最终渲染节点，动效仍要作用在它身上 - 如果用
<source></source>切换不同宽高比的图（比如竖图切横图），悬停时可能因尺寸突变导致抖动——建议所有srcset图保持相同宽高比 - 不要对
<source></source>写样式，它不渲染，写了也无效
移动端 touch 设备怎么让悬停生效？
真机上没有 hover，:hover 在 iOS/Android 浏览器里默认只在“模拟鼠标”场景（如 Safari 双击后短暂激活）下触发，不可靠。
更稳妥的做法：
- 改用
:focus-within+tabindex="0"，让用户点击/触摸后获得焦点并触发放大（需同时支持键盘导航） - 或者监听
touchstart动态加 class：img.addEventListener('touchstart', e => e.target.classList.add('zoomed')) - 避免纯
:hover方案上线，尤其当图片是重要内容入口时
放大时边缘裁剪不自然？试试 transform-origin 和 will-change
默认 scale() 以中心点缩放，但图片常靠左/靠上排版，直接放大后边缘会“甩出去”。用 transform-origin 调整锚点更可控。
例如右对齐图片想向右放大：
.img-right:hover {
transform: scale(1.2);
transform-origin: right center;
}
另外，频繁 transform 可能引发重绘卡顿，尤其低端安卓机：
- 给图片加
will-change: transform提前告知浏览器要动画（但别滥用，会增加内存） - 确保图片已压缩、尺寸合理（比如展示区域 400px 宽，就别塞 2000px 原图）
- 慎用
filter: blur()等高开销属性和scale叠加，容易掉帧
overflow: hidden**。没这层包裹，scale(1.2) 会直接把图片推出布局流，既不放大也不裁剪，看着像没效果。 
