低高度横向移动设备中的 Fancybox 缩放问题

问题描述：

我在响应式页面设计中使用 Fancybox v2.1.5。我遇到的问题是较小的移动设备，它们更像是矩形而不是正方形。

当设备处于纵向并且我调用 Fancybox 时，它会显示到屏幕的宽度，并且标题文本会在图像下方换行。这不是问题，因为纵向模式下通常有很多额外的屏幕空间。

然而，当我将设备更改为横向时，Fancybox 会缩小其高度以响应较短的屏幕高度。

宽度显然也成比例缩小。由于标题框宽度也由 Fancybox 容器的宽度控制，Fancybox 容器会根据图像宽度进行调整，这意味着文本会换行得更多，并且通常会导致图像缩小更多，因为它会调整为较小的尺寸以容纳所需的空间。标题文字换行。

我曾尝试使用 Fancybox CSS 和媒体查询，但没有成功，但阅读此处的其他帖子表明您需要 javascript 功能才能有效地做到这一点，虽然我对 html 和 CSS 非常熟悉，但我对 javascript 仍然相当不稳定。

所需功能：

我希望能够测试“短”屏幕高度并格式化 Fancybox 标题，以便为图像提供尽可能多的空间。

理想情况下，这将通过在上面控制 Fancybox 标题字体大小并允许标题框延伸到容器边界之外。

任何以编码建议或向我指出我错过的其他帖子的形式的帮助将不胜感激。

你可以制作 fancybox水平地仅响应式，因此它将扩展其height根据需要，无论屏幕尺寸如何。这样图像就不会缩小（包括它们的title）以适应视口的height（尽管您可能需要向下滚动才能看到较大图像的其余部分及其title)

如果此替代方案满足您的需求，您需要在自定义初始化脚本中组合一组 fancybox 的 API 选项，例如：

jQuery(document).ready(function ($) {
    $('.fancybox').fancybox({
        fitToView: false, // won't shrink to fit in the viewport
        maxWidth: "90%", // need to explain?
        helpers: {
            title: {
                type: "inside" // can fit larger title/captions
            }
        },
        beforeLoad: function () {
            // optional:
            // get a large title from a data attribute
            this.title = $(this.element).data("caption");
        }
    });
}); // ready

关于造型title，您始终可以添加额外的 CSS 规则（加载 fancybox CSS 文件后）来设置您喜欢的样式，例如：

.fancybox-title {
    font-family: verdana, sans-serif;
    font-size: 11px;
    font-style: italic;
    color: #008000;
}

See JSFIDDLE http://jsfiddle.net/y1sdxjrz/