移动端PhotoSwipe图片位置受页面其他img元素影响的解决办法

云原生阿岚

2026-6-27

解决Bootstrap页面中PhotoSwipe移动端图片定位异常问题

问题现象

在Bootstrap页面集成PhotoSwipe画廊时，若页面存在独立的<img>元素，移动端会出现以下异常：

画廊图片无法居中，复杂场景下甚至完全移出屏幕
部分控制图标不显示
桌面端定位正常，移除页面首个<img>后移动端恢复正常

问题根源

未添加响应式处理的<img>元素在移动端会超出视口宽度，导致页面出现横向滚动条，PhotoSwipe在计算视口位置时产生偏差，进而引发定位错误。

解决方案

方案1：为独立图片添加响应式类

给页面中所有非画廊内的<img>元素加上Bootstrap的img-fluid类，确保图片自适应视口宽度，消除横向滚动：

<img src="你的图片URL" alt="图片描述" class="img-fluid">

方案2：禁止页面横向滚动

在自定义CSS中添加规则，强制页面不出现横向滚动：

body {
  overflow-x: hidden;
}

方案3：修改PhotoSwipe初始化配置

初始化PhotoSwipe时，添加视口计算修正选项，强制它基于正确的窗口尺寸定位：

const options = {
  gallery:'#screenshots-gallery-ps',
  children:'a',
  pswpModule: () => import('https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.esm.js'),
  preloadFirstSlide: true,
  getViewportSizeFn: () => {
    return {
      x: window.innerWidth,
      y: window.innerHeight
    };
  }
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.init();