jQuery Lightbox圖片大小：限制圖片的最大大小

Question

我有大於屏幕視口的圖像，將它們與jQuery Lightbox一起使用時，圖像以原始尺寸顯示，因此要查看完整的圖像，需要水平和垂直滾動。 我嘗試使用在線提供的CSS調整，但是它們似乎無法正常工作。 我嘗試了以下代碼。

#lightbox-container-image-box {
  max-width:900px ! important; // Or your max-width
}

#lightbox-container-image img {
 max-width:675px ! important; // (your max width - 20)
}

因此，我想為lightbox視圖設置一個maxWidth和maxHeight，理想情況是不想更改lightbox.js文件，因為該文件正在其他多個地方使用。

Answer 1

嘗試添加寬度％

#lightbox-container-image-box {
  max-width:900px ! important; // Or your max-width
  width: 100%; //use 100% of even 90% , see what works for you
}

#lightbox-container-image img {
 max-width:675px ! important; // (your max width - 20)
 width: 100%; 
}

Answer 2

如果它是我的Lokesh Dhakar插件，則下面的CSS腳本已解決了該問題。

在文件lightbox.css的末尾，您可以編寫以下代碼

#lightbox-container-image-box {
    max-width: 80%;
    height:100% !important;
}
#lightbox-container-image img {
    max-width: 100%; 
}
#lightbox-container-image-data-box{ 
    max-width:80%; margin-bottom:50px;
}

警告 ：＃lightbox-container-image-box和＃lightbox-container-image-data-box必須具有相同的最大寬度

如果需要，可以設置最大寬度（以px為單位）。

GitHub項目鏈接

網站項目鏈接

Answer 3

如果所有圖像都較小，並且要大尺寸顯示，請進行測試以在jquery.colorbox.js中找到這些行

photo.style.width = photo.width +'px'; photo.style.height = photo.height +'px';

評論高行的圖像比率，例如

//photo.style.height = photo.height +'px';

並以較高的比例增加圖像寬度photo.style.width = photo.width + 200 +'px';

Answer 4

我知道這個問題是一年前提出的，但是由於@Sompuperoo的回答對我有所幫助，因此對其他人可能有用。

這是我使用的內容（在我的情況下，圖像大於屏幕尺寸）：

#lightbox-container-image-box {
    max-width: 100%;
    height:100% !important;
}
#lightbox-container-image img {
    max-width: 100%; 
}

Answer 5

在花了很多時間試圖使燈箱響應之后，我不得不放棄，腳本太舊且不足。

現在，我正在使用Featherlight： https ://noelboss.github.io/featherlight/，與lightbox幾乎相同，但響應迅速（也非常易於使用）。

JSFiddle演示： https ://jsfiddle.net/2pznx9vL/

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<a href="https://hdfreewallpaper.net/wp-content/uploads/2016/10/Norway-Balloon-Beautiful-Scenery-Wallpaper.jpg" data-featherlight="image"><IMG SRC="https://hdfreewallpaper.net/wp-content/uploads/2016/10/Norway-Balloon-Beautiful-Scenery-Wallpaper.jpg" style='width:150px'><br>click on image</a>