在Heroku应用中将图像调整为0 x 0

Question

我在Heroku上托管了一个简单的网页。有4张图像会自动调整为0x0，而在localhost上显示的效果很好。我不知道怎么了。

在localhost上的外观

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，它会阻止图像并为“ sponsor-logo”类注入样式

{
    display: none!important;
}