Simple Lightbox缩放异常 页面设置zoom:175%后灯箱图片显示不全

问题根源 #

异常是zoom非标准属性的特性导致的：zoom会修改元素实际渲染的视口尺寸，但Simple Lightbox默认基于原始视口尺寸计算灯箱图片的最大宽高、定位参数，175%的缩放会让计算出来的图片尺寸比实际可显示区域大1.75倍，因此只能看到左上角约1/4的内容。

推荐解决方案（无需修改Simple Lightbox代码） #

优先替换非标准的zoom方案，改用CSS transform: scale实现全站缩放，该方案不会影响JS读取视口尺寸的逻辑，完全兼容Simple Lightbox的默认配置。
将你现有的CSS代码替换为以下内容即可：

.entire-webpage {
  /* 替换原有zoom:175%设置 */
  transform: scale(1.75);
  /* 从左上角开始缩放，避免页面整体偏移 */
  transform-origin: top left;
  /* 补偿缩放带来的页面留白 */
  width: calc(100% / 1.75);
  height: calc(100% / 1.75);
  overflow-x: hidden;
}

备用解决方案（保留zoom属性的场景） #

如果一定要保留zoom设置，可以通过覆盖Simple Lightbox默认CSS强制适配缩放后的视口：

/* 覆盖Simple Lightbox默认尺寸规则 */
.slbImageWrap {
  max-width: calc(100vw / 1.75) !important;
  max-height: calc(100vh / 1.75) !important;
}
.slbImage img {
  max-width: 100% !important;
  max-height: 100% !important;
}

注意：上述代码中的1.75对应你设置的175%缩放比例，后续如果调整全站缩放比例，需要同步修改该数值。

内容的提问来源于stack exchange，提问作者jeonw70450