javascript - Colorbox maxHeight 剪辑我的图像

Question

我正在使用 Colorbox 在我的网站上显示高清图片。有些照片是肖像，有些是风景。我将 colorbox 设置为具有 maxHeight 和 maxWidth，它适用于横向图片。

问题是人像图片显示为风景图片，但放大后裁剪了一半。风景图片也会在一定程度上被裁剪，具体取决于窗口大小。

如何让 colorbox 自动缩放所有图像，以便整个图像很好地适合窗口，而不考虑方向或大小？

有关问题的演示，请参见下图。

Answer 1

感谢 Vitalii Masilianok 关于最大高度的提示，找到了一个解决方案(虽然不是最优的)

在我设置的colorbox css中:

#cboxContent img {
    max-height: 100%;
}

然后我必须使用 onComplete 回调来调整 Colorbox 的大小:

$(".gallery").colorbox({
    maxWidth: "95%", 
    maxHeight: "95%",
    transition: "none",
    onComplete: function() {
        $.colorbox.resize({ width: $('.cboxPhoto').width() })
    }
});

使用此解决方案，我删除了过渡，否则我会在每张幻灯片之间出现笨拙的 sizeup-sizedown 过渡。