必须加在的直接父容器上，且该容器需显式设置宽高、overflow: hidden，并设img为display: block；同时transform-origin: center和transition: transform缺一不可。

为什么直接写 transform: scale(1.2) 一定会出框

因为 scale() 默认以元素左上角为缩放原点，图片放大后右下部分必然溢出；更关键的是，<img> 是替换元素，自身不响应 overflow: hidden，所以光给图片加这个样式完全无效。真正起作用的裁剪必须落在它的**直接父容器**上。

overflow: hidden 必须加在哪个容器上

必须加在 <img> 的**直接父元素**（比如一个 <div class="img-wrapper">），且该容器需满足三个条件： <ul> <li>显式设置宽高（不能是 <code>height: auto 或靠内容撑开）

设 overflow: hidden

内部 <img> 设 display: block（消除行内默认留白）

❌ 错误写法：.gallery { overflow: hidden; } —— 即使所有图片都在里面，也不裁剪；✅ 正确结构：<div class="img-wrapper"><img src="..."></div>，样式写在 .img-wrapper 上。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

transform-origin: center 不只是“更好看”，而是必须项

不设这个，缩放中心就在左上角，悬停时图片会向右下偏移，视觉上像“被推开”。即使父容器有 overflow: hidden，偏移也会导致裁剪区域错位，依然露边。

• 必须配合 display: block 使用，否则 vertical-align 可能引入底部空白，放大后变明显白条
• 如果父容器是 Flex/Grid，还要加 align-items: flex-start 防止图片被居中撑高
• 过渡动画必须写在默认态：img { transition: transform 0.3s ease; }，否则首次 hover 没动画

移动端 :hover 失效不是你代码写错了

iOS Safari 和多数安卓浏览器没有持续悬停概念，:hover 只在点击瞬间触发一次。强行用 @media (hover: hover) 包裹才能避免在触屏设备上误触发。

• 稳妥写法：@media (hover: hover) and (pointer: fine) { .img-wrapper:hover img { transform: scale(1.2); } }
• 别用 transition: all —— 它可能意外过渡 color、margin 等属性，引发重排卡顿
• 如果要让放大图“浮最上层”，<img> 必须设 position: relative + z-index: 0，hover 时升到 z-index: 999

真正容易被忽略的是：父容器没设宽高时，overflow: hidden 在部分浏览器下根本不起作用；而图片用 object-fit: cover 时，若父容器比例和原图不一致，缩放后裁剪边缘会偏移——这时与其硬调，不如统一用 aspect-ratio 或改用背景图方案。