Изображения уменьшаются до 0 x 0 в приложении heroku - PullRequest
0 голосов
/ 16 мая 2019

У меня есть простая веб-страница, размещенная на Heroku.Имеется 4 изображения, которые автоматически изменяют размер до 0x0, в то время как на локальном хосте оно отлично отображается.Я не могу понять, что происходит не так.

Как это выглядит на localhost original

Как это выглядит на heroku heroku

Серый фон - потому что следующий раздел имеет этот фон, что означает, что размер изображения равен 0x0.

Чтобы проверить, я проверял исходный код с помощью инструментов разработчика.chrome dev tools

<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;
}

Спасибо!

1 Ответ

1 голос
/ 16 мая 2019

Я выяснил, почему, отключите свой Adblocker на этом сайте, он блокирует изображения и вводит стиль в класс «спонсор-логотип»

{
    display: none!important;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...