html - 在 fancyBox 中垂直放置图像+文本

Question

我正在尝试在一个小 fancyBox 中显示上下带有文本的垂直高分辨率图像.

我无法事先知道 fancyBox 有多大:fancyBox 将自动调整大小以适应客户端视口(viewport)。

最终结果应该是按比例调整图像大小以适应可用区域，并在上方和下方为文本留出足够的空间。换句话说:我需要“首屏”的所有内容(文本+图像):

问题是:我卡住了，宽度正常，高度不正常，所以我有一个垂直滚动条:

我的例子在这里:http://jsfiddle.net/sexyzane/wv05f8ez/4/但代码的相关部分是 CSS:

#viewbox > img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

我认为我的基本知识几乎是正确的(如果我删除 max-width 规则，我也会得到一个水平滚动条，正如预期的那样)但是，max-height 似乎被忽略了(在我的 jsfiddle 中设置为 5%，但设置为 50% 或 500% 似乎无关紧要)。

无 Javascript 解决方案的额外荣誉。

谢谢!

Answer 1

您应该尝试一下 bootstrap。

http://getbootstrap.com/javascript/#modals-examples