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

如果它是 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 项目链接

网站项目链接