Colorbox maxHeight剪辑我的图像

Question

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

问题是肖像照片显示为风景照片，但放大并剪裁成两半。根据窗口大小，风景图片也会在某种程度上被剪裁。

如何让colorbox自动缩放所有图像，使整个图像非常适合窗口内部，无论方向或尺寸如何？

请参阅下图以了解该问题。

Answer 1

找到一个解决方案（虽然不是最佳的），感谢Vitalii Masilianok关于max-height的提示

在我设置的colorbox css中：

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

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

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

使用此解决方案我删除了转换，否则我会在每张幻灯片之间获得大小不一的大小。

Answer 2

尝试这种态度：

1. 将widthRatio计算为imageWidth / winWidth，将heightRatio计算为imageHeight / winHeight
2. 将比率计算为Math.max(widthRatio, heightRatio)
3. 将图片尺寸设为原始imageWidth / ratio和原始imageHeight / ratio
4. 将功能挂钩在window.load和window.resize
上

请参阅此代码

var image = document.getElementById("image");
var origWidth = image.offsetWidth, origHeight = image.offsetHeight;

function setImageSize() {
    var winWidth = window.innerWidth, winHeight = window.innerHeight;
    var ratioWidth = origWidth / winWidth, ratioHeight = origHeight / winHeight;
    var ratio = Math.max(ratioWidth, ratioHeight);
    // var ratio = Math.max(ratio,1); uncomment this not to enlarge small images
    with(image.style) {
        width = origWidth / ratio - 20 + "px"; // 10 px margin
        height = origHeight / ratio - 10 + "px";
    }
}

window.addEventListener("load",setImageSize);
window.addEventListener("resize",setImageSize);

this fiddle
中的