Colorbox maxHeight剪輯我的圖像

我使用Colorbox在我的網站上顯示高清圖片。一些圖片是肖像，一些是風景。我將colorbox設置設置爲maxHeight和maxWidth，對於橫向照片的照片它可以正常工作。Colorbox maxHeight剪輯我的圖像

問題是縱向照片顯示爲橫向照片，但放大並截斷了一半。根據窗口尺寸的不同，風景圖片也會在一定程度上被裁剪。

如何讓colorbox自動縮放所有圖像，以便整個圖像很好地適合窗戶內部，忽略方向或大小？

請參閱下面的插圖來演示該問題。

enter image description here

來源

2013-04-15 hampusohlsson

哇，漂亮的照片！ –

你可以設置最大高度屬性爲圖像？像'$（'＃colorbox img'）.css（'max-height'，'600px'）;' –

這可能是解決方案的一部分。我可以使用CSS設置'max-height：100％'，然後圖像適合，但Colorbox /控件的寬度保持不變。還嘗試過'$ .colorbox.resize（{width：$ myImg.width ）}）在'onComplete'回調中，沒有工作 – hampusohlsson

實測值的溶液（儘管不是最佳的）由於維塔利Masilianok尖端大約最大高度

在顏色框的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轉換。

來源

2013-04-15 10:13:54 hampusohlsson

這個答案很棒，只是它將滾動條添加到每個圖像的底部（colorbox）。任何想法如何擺脫這一點？ –

@Dave_P不清楚你正在發生什麼，但聽起來像你可以嘗試'overflow-x：hidden;'作爲圖像容器的CSS規則（未測試） – hampusohlsson

嘗試這種態度：

計算widthRatio作爲imageWidth/winWidth，heightRatio作爲imageHeight/winHeight
計算的比率作爲Math.max(widthRatio, heightRatio)
圖像大小設置爲原始imageWidth/ratio和原始imageHeight/ratio
掛鉤功能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

來源

2013-04-15 13:15:07

Colorbox maxHeight剪輯我的圖像

回答

相關問題