防止 Javascript 覆盖 CSS答案

【问题标题】：Prevent Javascript from Overriding CSS防止 Javascript 覆盖 CSS
【发布时间】：2019-12-03 10:02:23
【问题描述】：

我制作了一个图库页面，当您使用灯箱点击图片时，您可以在其中全屏查看图片。在我的页脚中是：来自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;
}

我想要的：我得到什么：

【问题讨论】：

在.lightbox.lb-image之后改变css.lb-outercontainer的顺序
请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放在问题本身中。

标签： javascript css lightbox

【解决方案1】：

我不确定你的意思是不是你的意思，但你的width 和height 正在被你的!important 覆盖。

删除即可解决问题，尽量不要使用!important。

结果：

【讨论】：

看起来确实更好，但我希望白色容器始终保持相同大小，并且图片可以拉伸，并填充宽度或高度。感谢您的帮助

【解决方案2】：

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

在img 标记处使用object-fit: contain 和width: 100% 可能就是您要查找的内容。由于声誉受损，我无法再发布图像，因此它发布了图像的链接。

Lightbox screenshot

【讨论】：

您的 CSS 文件 lightbox.css 中没有 object-fit: contain;。您可能没有更新网站。该文件未正确上传到您的站点。链接：imgur.com/a/Oy6AR7F