如何在Lightbox2中調整圖像大小？

Question

我正在使用http://lokeshdhakar.com/projects/lightbox2/ 。 我有圖像縮略圖，單擊它們會在燈箱中打開-顯然。

我的問題是，當其中一些圖像為1800x1200時，燈箱會覆蓋整個網頁。

如何編輯以確保圖像的最大高度（例如400px）和寬度成比例？ 我不能簡單地以較低尺寸上傳圖像，因為它們是用戶上傳的圖像，因此我需要執行此腳本/服務器端。

謝謝！

Answer 1

您可以在圖片和燈箱上同時使用max-width和max-height CSS屬性：

演示： http ： //jsfiddle.net/rdfAV/1/

CSS：

img {
    max-width: 400px;
    max-height: 400px;
}

.lb-outerContainer, .lb-dataContainer {
    max-width: 420px;
    width: auto!important;
    height: auto!important;
}​

此方法似乎與所有主流瀏覽器兼容，可以在這里找到完整的兼容性列表： http : //caniuse.com/#feat=minmaxwh

Answer 2

請嘗試將以下內容添加到您的CSS中：

 .lb-image{
      max-width: inherit;
  }

Answer 3

非常感謝..真的可以幫助我的登陸頁面

一些經過編輯的代碼，明智地播放

img {
max-width: 800px;
max-height: 600px;
}

.lb-outerContainer, .lb-dataContainer {
max-width: 800px;
width: auto!important;
height: auto!important;
}​