防止Java脚本覆盖CSS

Question

我创建了一个图库页面，您可以在其中使用灯箱单击全屏查看图片。 在我的页脚中是：https://lokeshdhakar.com/projects/lightbox2/的lightbox-plus-jquery.js 我写的CSS也是我想要的。 但是如果您浏览我的网站https://rocallisa.xyz/photos 灯箱中的宽度和高度会被覆盖。

.lb-outercontainer{
    height: 90vh !important;
    width: 97vw !important;
}

.lightbox.lb-image{
    display: block;
    margin: auto;
    width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    max-width: none !important;
    object-fit: contain;
    text-align: center;
    border-radius: 3px;
    border: 4px solid white;
}

我想要什么： 我得到的是：

Answer 1

我不确定您的意思，但您的var lang; var jsonToLoad; var json file = require(root_path()+'/public/locale'+lang+'/LC_MESSAGES/'+jsonToLoad); 和width是否被您的height覆盖。

只需删除它就可以解决问题，请尽可能不要使用!important。

结果：

Answer 2

.lightbox.lb-image{
    width: 100%;
    height: 100%;
    object-fit: contain;
    ...
} 

您正在寻找在object-fit: contain标记处使用img的{​​{1}}。我无法再发布图像，这是我声誉下降的原因，因此它发布了指向图像的链接。

Lightbox screenshot