javascript - Colorbox maxHeight 剪辑我的图像

Question

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

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

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

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

Answer 1

由于 Vitalii Masilianok 关于 max-height 的提示，找到了一个解决方案（尽管不是最佳的）

在我设置的colorbox css中：

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

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

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

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

Answer 2

试试这个态度：

1. 计算widthRatio为 imageWidth / winWidth, heightRatioas 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);

在这个小提琴