图片hover放大被裁切应设父容器宽高并加overflow: hidden，图片设display: block，transform-origin: center center，居中用flex；移动端需JS监听touch事件切换class，避免纯:hover；边缘模糊可尝试整数scale或image-rendering优化。
hover 放大图片时图片被裁切怎么办
直接用 transform: scale(1.2) 而不配合 overflow: hidden，图片放大后会撑出容器、破坏布局，甚至触发页面滚动条。关键不是“加 scale”，而是“让父容器主动截断溢出部分”。
- 父容器必须设明确宽高（比如
width: 300px; height: 200px;），否则overflow: hidden无效 -
overflow: hidden必须写在父容器上，不是图片本身 - 图片默认是 inline 元素，容易带底部空白，建议加
display: block或vertical-align: top
scale 放大中心点偏移导致图片“跑出视野”
默认 transform-origin 是 50% 50%（居中），但若父容器 padding 不对称或图片本身没居中，放大后视觉上就像往某侧偏移。这不是 bug，是 origin 计算基准没对齐。
- 显式设置
transform-origin: center center避免浏览器差异 - 确保图片在父容器内水平垂直居中：父容器用
display: flex; justify-content: center; align-items: center; - 慎用
margin: auto居中图片——它依赖块级上下文，而 img 默认不是块级
移动端 hover 失效或响应迟钝
手机没有 hover 概念，:hover 伪类在 iOS Safari 和多数安卓浏览器里只在点击后触发一次，且可能延迟或误触发。单纯靠 CSS :hover 做放大，在移动设备上基本不可靠。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 真要支持触屏，得用 JavaScript 监听
touchstart/touchend切换 class，例如加is-hovered - CSS 里把样式从
.img-container:hover img改成.img-container.is-hovered img - 注意 touch 设备的
scale可能触发双指缩放，需加user-scalable=nometa（但会影响整体体验，慎用）
scale 放大后边缘模糊或锯齿明显
CSS scale() 是 GPU 加速变换，但浏览器对非整数倍缩放的插值处理不一致，尤其在高 DPI 屏幕或 Chrome 旧版本里，容易出现发虚、色边或像素抖动。
立即学习“前端免费学习笔记（深入）”；
- 优先用整数倍放大（如
scale(2)）比scale(1.3)更清晰 - 加
image-rendering: -webkit-optimize-contrast;或image-rendering: crisp-edges;强制浏览器用 nearest-neighbor 插值（适合图标类小图） - 对照片类大图，更稳妥的方式是准备多张分辨率素材，用
srcset+picture切换，而非纯 CSS 放大
真正麻烦的是混合场景：既要响应式适配，又要平滑过渡，还得兼顾 touch 和 hover。这时候 scale 只是表层效果，背后得权衡资源加载、渲染管线和交互意图。
