Изображение @media не загружается на уменьшенном экране - PullRequest
Новая
       13

Изображение @media не загружается на уменьшенном экране

0 голосов
/ 23 ноября 2018

У меня есть проблема, похожая на один из моих предыдущих вопросов.Когда я уменьшаю до 975 пикселей, моя картинка должна измениться на JPG, она кажется работающей локально, когда я уменьшаю размер экрана, но когда я проверяю онлайн, новое изображение не отображается.

Как это было ранее, япоиграл с ним в течение нескольких часов сначала из-за страха выглядеть глупо, но сейчас я сдамся, я возьму его на подбородок, если кто-нибудь сможет помочь:)

HTML: 

<!-- load this image on big screen -->
<div class=" jumbotron jumbotron-fluid jumbotronbrejos hideformob">
    <div class="container-fluid relspan">
        <img class="brejosimg" src="resources\images\brejosHouse.jpg">
            <div class="jumbospan">
                <h4 id="fontI">Albufeira, Algarve Portugal</h4> 
            </div>
    </div>
</div>

<!-- load this image on smaller screens   -->
<div class="container-fluid navpad">
    <div class="row">
        <div class="farmhouseimg farmhouse"></div>
    </div>
</div>  <!-- end of container -->

CSS: 

/* on screens that are less than 975px */

.farmhouseimg {
    background-image: url("../images/farmhouse.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-left:0px;
    margin-right: 0px;
    width:100%;
    display: none;
    min-height: 600px;
}

.farmhouse {
    margin-bottom: 30px;
    min-height: 600px;
    width:100%
}

@media only screen and (max-width: 975px) {

    .farmhouseimg {
        display: block;
    }
}

.hideformob {
    display: block;
}

@media only screen and (max-width: 975px) {
    .hideformob {
        display: none;
    }
}
...