jQuery Lightbox Image Size : 限制图片的最大尺寸答案

【问题标题】：jQuery Lightbox Image Size : Limit the max size of ImagejQuery Lightbox Image Size : 限制图片的最大尺寸
【发布时间】：2018-11-08 16:31:35
【问题描述】：

我有比屏幕视口大的图像，当将它们与 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)
}

所以，我要做的是为灯箱视图设置 maxWidth 和 maxHeight，理想情况下不想更改 lightbox.js 文件，因为它正在多个其他地方使用。

【问题讨论】：

只有当图像的原始尺寸大于用户的屏幕尺寸时，图像才会在所有情况下显示，然后灯箱渲染的图像需要调整大小以适应用户的屏幕。我们只需要网络兄弟的兼容性，我们有不同的移动网站

标签： javascript jquery html css image

【解决方案1】：

如果是 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 为单位设置 max-width。

GitHub project link

Website project link

【讨论】：

【解决方案2】：

尝试添加宽度 %

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

【讨论】：

【解决方案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';

【讨论】：

【解决方案4】：

我知道这个问题是在一年前提出的，但由于 @Sompuperoo 的回答对我有所帮助，它可能对其他人有用。

这是我使用的（在我的情况下，图像大于屏幕尺寸）：

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

【讨论】：

【解决方案5】：

在花了很多时间尝试让灯箱响应之后，我不得不放弃，脚本太旧且不合适。

现在我正在使用 Featherlight：https://noelboss.github.io/featherlight/，几乎与灯箱相同，但完全响应（而且非常易于使用）。

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>

【讨论】：