html - 图像在 heroku 应用程序中调整为 0 x 0

Question

我在 Heroku 上托管了一个简单的网页。有 4 张图像自动调整大小为 0x0，而它在本地主机上显示得非常好。我不知道出了什么问题。

它在本地主机上的样子

它在 heroku 上的样子

灰色背景是因为下一部分有那个背景，这意味着图像的大小是 0x0。

为了验证，我通过开发者工具检查了源代码。

<div class="section2">
    <div class="heading">POWERED BY</div>
    <div class="logos">
        <a href="https://www.jamboreeindia.com/">
            <div class="sponsor-logo">
                <img src="jamboree3.png" class="overlay-logo">
                <img src="jamboree.png" class="original-logo">
            </div>
        </a>
        <a href="http://www.megalogix.org/">
            <div class="sponsor-logo">
                <img src="mcs2.png" class="overlay-logo">
                <img src="mcs.png" class="original-logo">
            </div>
        </a>            
    </div>
</div>

CSS

.section2{
    width: 100vw;
    padding: 5px 0 0 0; 
}

.heading{
    text-align: center;
    font-weight: 700;
    color: #9FACCC;
}

.heading2{
    text-align: center;
    font-weight: 700;
    color: #333;
    font-size: 35px;
}

.logos{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.sponsor-logo img{
    width: 150px;
    height: auto;
    margin: 50px;
}

.original-logo {
    z-index: 1;
    opacity: 0;
    transition: all .3s ease;
}

.overlay-logo {
    position: absolute;
    z-index: 3;
    transition: all .3s ease;
}

.overlay-logo:hover {
    opacity: 0;
    transition: all .3s ease;
}

.overlay-logo:hover + .original-logo {
    opacity: 1;
    transition: all .3s ease;
}

谢谢!

Answer 1

我发现了原因，在该站点上禁用您的 Adblocker，它会阻止图像并将样式注入(inject)“sponsor-logo”类

{
    display: none!important;
}