Question

如何在Google Chrome上解决此问题：

当我尝试测试响应性时，这是在我的网站（www.haagsehof.nl）上。这就是发生的事情。

它应该如下所示：

即使这个也不正确，你可以看到头部缺失。我认为这是WordPress中的CSS问题。因为我使用自定义HTML在WordPress中创建了这个部分，如下所示：

<!DOCTYPE html>
<html>
<style>
    html, body{  height: 100%; width:100%;}

   #pl-4 {
        background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;
        margin-left: -15px;
        margin-right: -15px;
    }


    @media only screen and (max-width: 399px) {
    #pl-4{
            background: url(https://www.haagsehof.nl/content/uploads/2018/03/15214591016010952.jpg) fixed  no-repeat center center ; 
            -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
            background-size: cover;
            margin-left: -15px;
        margin-right: -15px;
        }
    }

    .wrapper{
            margin-top: 150px;
    }


    div, body{
        margin: 0;
        padding: 0;
        font-family: exo, sans-serif;
    }
    .wrapper {      height: 100%;       width: 100%;    }

    #headerSchoon{
        color: white !important;
        text-align: center !important;
    }
    #textSchoon{
        color: white !important;
        text-align: center !important;
        font-size: 150%;
    }
</style>

<body id="mainSchoonMaker">
<link href='https://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>
    <div class="wrapper">
        <div class="message">
            <h1 id="headerSchoon">Schoonmaakwerk is mensenwerk</h1>
            <p id="textSchoon"> Wij willen door middel van een persoonlijke en mensgerichte aanpak betrokkenheid creëren tussen schoonmaakmedewerker, klant en schoonmaakbedrijf Haagsehof. Hierdoor ontstaat er een chemie die leidt tot een optimale dienstverlening, waarbij u als klant door ons en onze medewerkers volledig wordt ontzorgd.</p>
        </div>
    </div>
</body>
</html>

这里出了什么问题，如何显示可以向上和向下滚动的完整图像，它对于电话设备和普通电脑都具有相同的风格？非常感谢。

=== EDIT === 使用之后：

#pl-4 {
        background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
        background-size: cover;
        margin-left: -15px;
        margin-right: -15px;
    }

@Ruben Pauwels建议，这就是发生的情况，对于移动设备，图像不完整，我不明白为什么这么难：

这是针对移动版本我如何解决这些问题，我有几个解决方案，但似乎没有人能解决这个问题：

Answer 1

设置background-size属性可以解决您的问题。有关详细信息，请参阅此处：MDN Background-size

#pl-4 {
        background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
        background-size: cover;
        margin-left: -15px;
        margin-right: -15px;
    }

Answer 2

好吧，这是我能找到的最好的解决方案，它不是我想要的，但它至少比它现在的更好：

使用：

    @media only screen and (max-width: 780px) {
    #pl-4{
            background: url(https://www.haagsehof.nl/content/uploads/2018/03/15214591016010952.jpg)  ; 
            margin-left: -15px;
        margin-right: -15px;
background-size: contain;
/*max-width: 100%; 
max-height: 100%; */

        }
    }

指定图像宽度全尺寸WordPress

2 个答案: