用 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，否则放大后图片会溢出边界
• 避免对 直接加 transform，推荐包一层
  容器更可控

  Bootstrap 5 下的最小可行代码（含兼容性处理）

  Bootstrap 5 默认启用 prefers-reduced-motion 媒体查询，如果用户系统开启了“减少动画”，transition 会被禁用——这点常被忽略，导致测试时正常、上线后失效。

  下面这段代码已绕过该限制，并适配响应式图片：

  <div class="img-hover-zoom position-relative overflow-hidden rounded">
    @@##@@
  </div>
  <p><style>
  .img-hover-zoom {
  transition: transform 0.3s ease;
  }
  .img-hover-zoom:hover {
  transform: scale(1.08);
  }
  /<em> 强制启用过渡，绕过 prefers-reduced-motion /
  @media (prefers-reduced-motion: reduce) {
  .img-hover-zoom {
  transition: transform 0.3s ease !important;
  }
  }
  </style></p>

  注意：.img-fluid 确保图片随容器缩放，position-relative 是为了后续加遮罩或文字时定位方便；rounded 可选，但圆角在缩放时能缓解边缘裁切感。

  放大中心点偏移？用 transform-origin 调整

  默认缩放以元素中心为原点，但如果图片是横幅或头图，悬停时可能想让顶部保持不动、只向下放大——这时就得改原点位置。

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载

  • 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);
  }

  同时确保页面 包含 user-scalable=no 或至少不禁止缩放，否则 iOS 会拦截 transform 动画。

  真正麻烦的是多图网格（比如 .row > .col 布局）里某张图放大后盖住相邻列——这得靠 z-index + position: relative 组合控制层级，而且必须每张图单独加 z-index: 2，不能只给父容器设。