javascript - jQuery 灯箱图像大小 : Limit the max size of Image

Question

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

所以，我想做的是为灯箱 View 设置 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 必须相同的最大宽度

如果您愿意，可以设置最大宽度(以像素为单位)。

GitHub project link

Website project link