Colorbox maxHeight剪辑我的图像
Colorbox maxHeight剪辑我的图像
提问于 2013-04-15 17:32:13
我正在使用Colorbox在我的网站上显示高清晰度图片。有些是肖像画，有些是风景画。我将颜色盒设置为具有maxHeight和maxWidth，它对面向风景的图片工作良好。
问题是，肖像图片显示为风景图片，但放大并裁剪成两半。根据窗口大小，风景图片也会在一定程度上被裁剪。
如何让colorbox自动缩放所有图像，使整个图像能够很好地适应窗口，而不考虑方向或大小？
有关该问题的演示，请参见下图。
回答 2
Stack Overflow用户
发布于 2013-04-15 18:13:55
找到了一个解决方案(尽管不是最优的)，这要归功于Vitalii Masilianok关于max-height的提示
在我设置的颜色盒css中：
#cboxContent img {
max-height: 100%;
}然后我必须使用onComplete回调来调整Colorbox的大小：
$(".gallery").colorbox({
maxWidth: "95%",
maxHeight: "95%",
transition: "none",
onComplete: function() {
$.colorbox.resize({ width: $('.cboxPhoto').width() })
}
});使用这个解决方案，我删除了过渡，否则我会在每张幻灯片之间得到笨拙的放大和缩小过渡。
Stack Overflow用户
发布于 2013-04-15 21:15:08
试试这种态度：
计算图像大小为imageWidth / winWidth，计算图像大小为heightRatio / imageHeight之比，计算图像大小与原始大小和原始大小之比在和window.resize上的函数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中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16011861
复制相关文章
相似问题
腾讯云开发者
