Javascript 显示大内容（宽度）的Fancybox3

我对fancybox3有意见。如果您的内容宽度较大，例如2500px，则框的显示将不正常。要查看此fancybox，您必须向下滚动

这是我的密码：

<div style="height: 800px;">
  <a data-fancybox data-src="#hidden-content" href="javascript:;">
      Trigger the fancyBox width 500px;
  </a>
  <br>
  <a data-fancybox data-src="#hidden-content2" href="javascript:;">
      Trigger the fancyBox width 2500px;
  </a>
</div>

<div style="display: none;" id="hidden-content">
    <h2>Hello</h2>
  <div style="width: 500px;">
  ... some stuff ...
  </div>
</div>

<div style="display: none;" id="hidden-content2">
    <h2>Hello</h2>
  <div style="width: 2500px;">
  ... some more stuff ...
  </div>
</div>

我对这个问题有一个密码笔。有什么想法吗？

---

fancyBox使用内嵌块技巧进行垂直和水平居中。这是以未知为中心的最佳选择，但不幸的是，它存在一些缺点。通过强制超宽内容，您正在破坏它

您有几个选项，例如：

使内容可滚动：

隐藏伪元素

您可以通过设置数据幻灯片class=wide属性来设置自定义类名

---

为什么不使用autoDimensions:true选项根据对象的大小自动调整content@MuhammadOmerAslam：我尝试了这个选项，但不起作用。我在文档中也没有找到这个选项：最大宽度为我做了这项工作。非常感谢你！

#hidden-content2 {
  max-width: calc(100% - 80px);
  overflow: auto;
}

.fancybox-slide.wide:before {
    display: none;
}