使用 Fancybox jQuery 插件显示在显示时动态调整大小的内联内容（图像和文本）答案

【问题标题】：Using Fancybox jQuery plugin to display inline content (image and text) that is dynamically resized when displayed使用 Fancybox jQuery 插件显示在显示时动态调整大小的内联内容（图像和文本）
【发布时间】：2012-02-10 03:13:32
【问题描述】：

使用 Fancybox jQuery 插件。

我已经能够让它很好地显示图像。而且我已经能够让它显示内联内容，例如带有一些段落的 div。当内容由fancybox 显示时，通过这两种方式，您可以将浏览器窗口更改为不同的大小，并且fancybox 内容框也可以很好地调整大小。

现在我的问题。我需要在图像正下方显示带有 3-4 句文本的图像，而不是仅显示图像。

为此，我使用了内联内容方法。我的内联内容是这样的：

<div style="display: none">
    <div id="content-div">
        <img src="images/product1.jpg" alt="" />
        <p>My several lines of text would go here.</p>
    </div>
</div>

fancybox 显示这个内容时总是有点奇怪。例如，文本将被截断，并出现滚动条。它永远不会做我想要的，即把图像和文本视为一个单元，并动态调整图像和文本的大小，就像只显示和图像，或者只显示 html 文本时那样。

我见过一些示例，您可以在 fancybox 中显示具有预设宽度和高度的内联内容，但我希望它根据用户浏览器窗口大小来改变大小。

这可以吗？有什么我缺少的选项吗？

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

fancyBox 在显示之前读取宽度/高度，它不会预加载图像。由于图像可能稍后加载，它们可以展开父级并导致出现滚动条。最简单的解决方案是为内联图像设置尺寸，例如<img src=".." width="200" height="100" />

【讨论】：

我试过这个，但没有帮助。我仍然会在底部截断文本或出现滚动条，或两者兼而有之。为了调整大小，保存图像和文本的 div 不会被视为单个单元或元素。我尝试添加 autoSize 和 fitToView 但这没有帮助。