FancyBox 3 手机横屏模式下图片尺寸适配问题咨询

我之前也碰到过FancyBox 3在手机横屏模式下图片没法撑满可用空间的情况，试了几个实用的方法，分享给你：

方法一：调整FancyBox初始化配置 #

在初始化FancyBox的时候，添加几个参数来强制适配视口高度：

$('[data-fancybox="gallery"]').fancybox({
  autoSize: false,
  fitToView: false,
  height: '100vh',
  touch: {
    vertical: false // 禁用垂直方向的触摸滑动，避免影响高度适配
  }
});

这里height: '100vh'会让FancyBox的内容区域直接占满整个视口高度，autoSize和fitToView设为false是关闭默认的自动尺寸调整，确保我们的自定义高度生效。

方法二：添加横屏专属CSS样式 #

如果配置调整效果不佳，试试专门针对横屏场景写CSS媒体查询，强制图片容器和图片的高度：

/* 针对横屏设备 */
@media (orientation: landscape) {
  /* 强制FancyBox图片内容区域占满视口高度 */
  .fancybox-slide--image .fancybox-content {
    height: 100vh !important;
    max-height: 100vh !important;
    width: auto !important;
  }
  /* 让图片适配容器高度，contain保证完整显示，cover会裁切填满，按需选择 */
  .fancybox-slide--image img {
    height: 100% !important;
    object-fit: contain;
    width: auto !important;
  }
}

这个方法的优势是精准针对横屏场景，不会影响竖屏的正常显示。如果希望图片完全覆盖容器（允许裁切），可以把object-fit: contain改成object-fit: cover。

方法三：排查CSS冲突 #

有时候页面其他样式会无意间影响FancyBox的布局，比如全局的box-sizing设置或者父容器的padding/margin。可以检查下是否有类似下面的全局样式：

* {
  box-sizing: border-box;
}

如果有的话，给FancyBox的容器单独设置box-sizing: content-box试试，避免内边距挤压内容高度：

.fancybox-content {
  box-sizing: content-box !important;
}

你可以先试试方法二，针对性最强，要是还不行再结合方法一调整配置，一般这几个方案就能解决问题啦。

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