Javascript jQuery Lightbox图像大小：限制图像的最大大小

我有比屏幕视口大的图像，当与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文件，因为它正在多个其他位置使用。

尝试添加宽度%

#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%; 
}

---

如果所有这些图像都是小尺寸的，并且希望以大尺寸显示，那么请进行测试 在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’

我知道一年前有人问过这个问题，但既然@Sompuperoo的答案对我有帮助，它可能对其他人有用

以下是我使用的（在我的例子中，图像大于屏幕大小）：

---

如果是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容器图像框和#lightbox容器图像数据框必须具有相同的最大宽度

如果需要，可以设置px中的最大宽度

---

在花了大量时间尝试使lightbox响应之后，我不得不放弃，因为脚本太旧，无法满足需要

现在我使用的是Featherlight:，几乎与lightbox相同，但完全响应（而且非常容易使用）

JSFIDLE演示：

---

只有当图像的原始大小大于用户的屏幕大小时，才会在所有情况下显示图像，然后需要调整lightbox渲染的图像的大小，使其适合用户的屏幕。我们只需要网络浏览器的兼容性，我们有一个不同的mobi网站

#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;
}

<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>