Html 拟合图像+；fancyBox中垂直的文本

我试图显示一个垂直的，高分辨率的图像，上面和下面的文字在一个小屏幕内

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

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

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

我的示例如下：但代码的相关部分是CSS：

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

我认为我基本上是对的（如果我删除

max width

规则，我也会像预期的那样得到一个水平滚动条），但是，

max height

似乎被忽略了（在我的JSFIDLE中设置为5%，但设置为50%或500%似乎无关紧要）

无Javascript解决方案的额外荣誉

---

谢谢

您应该尝试一下引导

---

您需要为您的父图像添加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;
}

---

这是我处理过的链接，我希望这是您正在寻找的链接。

感谢Ganesh，您已经注意到忽略了最大高度，但是，固定的35%强制解决方案在特定视口中工作：如果您尝试使用更大的视口，则图像太小（，）。正如我所说，我事先不知道fancyBox会有多大：fancyBox将自动调整大小以适应客户端视口。确定高度和宽度问题您要根据视口解决，然后您需要编写媒体查询，或者您需要通过Javascript或jquery通过计算视口高度和宽度I应用宽度和高度是的，但我仍然无法解决这个问题。您能为这个问题提供一个基于引导的JSFIDLE解决方案吗？谢谢