用 transform: scale() 实现图片悬停放大，需配合 overflow: hidden、transform-origin 调整缩放中心，并补充 :active 和 touch-action: manipulation 保障移动端响应，同时绕过 prefers-reduced-motion 限制。
用 transform: scale() 实现图片悬停放大，别碰 width/height
直接改 width 和 height 会导致布局抖动、边缘锯齿、过渡生硬——这是最常见也最容易踩的坑。Bootstrap 本身不提供“图片悬停放大”组件，但它的 CSS 工具类和过渡支持足够支撑一个轻量可靠的实现。
核心是用 transform: scale() 配合 transition，确保硬件加速和视觉平滑：
-
transform触发 GPU 加速，缩放过程不重排文档流，不会挤开周围元素 - 必须给父容器设
overflow: hidden，否则放大后图片会溢出边界 - 避免对
<img alt="怎么用Bootstrap制作图片悬停放大特效" >直接加transform，推荐包一层<div class="img-hover-zoom"> 容器更可控<h3>Bootstrap 5 下的最小可行代码（含兼容性处理）</h3> <p>Bootstrap 5 默认启用 <code>prefers-reduced-motion媒体查询，如果用户系统开启了“减少动画”，transition会被禁用——这点常被忽略，导致测试时正常、上线后失效。下面这段代码已绕过该限制，并适配响应式图片：
<div class="img-hover-zoom position-relative overflow-hidden rounded"> <img src="photo.jpg" class="img-fluid w-100 h-auto d-block" alt="示例图"> </div> <p><style> .img-hover-zoom { transition: transform 0.3s ease; } .img-hover-zoom:hover { transform: scale(1.08); } /<em> 强制启用过渡，绕过 prefers-reduced-motion </em>/ @media (prefers-reduced-motion: reduce) { .img-hover-zoom { transition: transform 0.3s ease !important; } } </style>注意：
.img-fluid确保图片随容器缩放，position-relative是为了后续加遮罩或文字时定位方便；rounded可选，但圆角在缩放时能缓解边缘裁切感。放大中心点偏移？用
transform-origin调整默认缩放以元素中心为原点，但如果图片是横幅或头图，悬停时可能想让顶部保持不动、只向下放大——这时就得改原点位置。
-
transform-origin: top center→ 从顶部中点放大，适合 banner 图 -
transform-origin: 0 0→ 从左上角放大，适合图标类小图 - 不要写成
top left这类模糊值，用像素或精确关键词，避免 Safari 渲染异常
例如 banner 场景：
.img-hover-zoom.banner { transform-origin: top center; }移动端点击不触发？补上
:active并禁用缩放延迟iOS Safari 对
:hover支持有限，真机上常要点两下才生效，或完全没反应。解决方案不是删掉 hover，而是补充:active并加touch-action: manipulation：.img-hover-zoom { touch-action: manipulation; } .img-hover-zoom:hover, .img-hover-zoom:active { transform: scale(1.08); }同时确保页面
<meta name="viewport">包含user-scalable=no或至少不禁止缩放，否则 iOS 会拦截transform动画。真正麻烦的是多图网格（比如
.row > .col布局）里某张图放大后盖住相邻列——这得靠z-index+position: relative组合控制层级，而且必须每张图单独加z-index: 2，不能只给父容器设。 -
