时间戳

首页 > 解决方案 > @media 图像无法在缩小的屏幕上加载

html - @media 图像无法在缩小的屏幕上加载

问题描述

我有一个与我之前的问题类似的问题。当我减小到 975px 以下时，我的图片应该更改为不同的 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;
    }
}

标签： htmlcssimagemedia-queries

解决方案

推荐阅读