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

Question

我正在尝试在小fancyBox内显示带有文字上方和下方的垂直高分辨率图像。

我事先无法知道fancyBox的大小：fancyBox会自动调整大小以容纳客户端视口。

最终结果应该是图像按比例重新调整大小以适应可用区域，为文本留下足够的空间。换句话说：我需要整个事物（文字+图像）“在首页上”：

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

我的例子就在这里：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

Answer 2

您需要为图像的父级添加css

div#viewbox {
    display: block;
    height: 96%;
    position: relative;
    width: 100%;
}

然后添加对象：封面;属性到图像，以便始终保持图像分辨率

#viewbox > img {
  width: auto;
  height: auto;
  max-height:35%;
  max-width: 100%;
 object-fit: cover;
}

这是我在http://jsfiddle.net/wv05f8ez/5/上工作过的链接。我希望这是你正在寻找的。