用按钮控制图片缩放应使用transform: scale()配合transition和transform-origin: center，通过dataset存当前缩放值并限制范围（0.5～3），避免修改width/height导致失真，还原按钮设scale(1)对应原始像素尺寸，确保按钮与滚轮等交互共享同一currentScale状态。
怎么用按钮控制图片缩放而不破坏原始宽高比
直接改 img.width 或 img.height 属性会强制拉伸、失真，且无法平滑过渡。正确做法是只操作 transform: scale()，靠 CSS 控制视觉缩放。
关键点：
- 给图片加
style="transform: scale(1); transition: transform 0.2s ease; transform-origin: center;" - 按钮点击时修改
img.style.transform，例如img.style.transform = "scale(" + nextScale + ")" - 用
img.dataset.scale存当前值（如img.dataset.scale = "1.2"），避免反复解析矩阵 - 限制范围：缩放值建议设在
0.5到3之间，超出容易溢出视口或看不清细节
左右切换图片时如何避免 DOM 重排和闪动
用 transform: translateX() 移动整个图片容器，比切换 src 或显隐 display 更轻量、无重排、动画顺滑。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 把所有图片包进一个
<div class="gallery-track">，设display: flex - 给该容器设固定宽度（如
width: 100%）和overflow: hidden - 切换时只改
galleryTrack.style.transform = "translateX(-" + offsetX + "px)"，offsetX 是单张图的自然宽度 × 当前索引 - 提前用
img.naturalWidth获取每张图原始尺寸，别依赖offsetWidth——它受 CSS 影响可能不准
滚轮缩放和按钮缩放共存时状态怎么不冲突
混合交互下最常出问题的是“滚轮放大后点还原按钮，结果缩回了容器默认大小而非原始像素尺寸”。根源在于没区分两种“原始”：一个是 CSS 布局下的默认尺寸，一个是图片本身的 naturalWidth/naturalHeight。
解决方案很实在：
- 初始化时就存好基准：
const baseScale = container.clientWidth / img.naturalWidth - 按钮“还原”应设为
scale(1)表示原始像素尺寸，而不是简单设回scale(baseScale) - 所有缩放操作统一走同一个变量：
let currentScale = baseScale，按钮和滚轮都更新它，再同步写入style.transform - 滚轮事件必须
event.preventDefault()，否则页面会跟着滚动；移动端则完全不用 wheel，改用touchmove计算双指距离变化
图片左右镜像翻转（非切换）用 scaleX(-1) 要注意什么
如果需求是“让一张图左右对换”（比如对比图、镜像预览），不是切换多张图，scaleX(-1) 是最简方案，但文字和图标会一起翻转。
避坑清单：
- 若图里含文字，需额外套一层容器：
<div class="flip-wrapper"><img></div>，然后对 wrapper 应用scaleX(-1)，再对 img 单独加scaleX(-1)抵消文字翻转 -
transform-origin默认是 center，没问题；但如果要从左侧翻转（像推拉门效果），得设transform-origin: left center - 动画必须写在默认状态上：
.flip-wrapper { transition: transform 0.3s; }，不能只写在 hover 或 class 切换里，否则首次触发无过渡 - 父容器记得加
overflow: hidden，否则翻转后边缘可能溢出
