指定图像宽度全尺寸WordPress答案

【问题标题】：specifying image width full size WordPress指定图像宽度全尺寸WordPress
【发布时间】：2026-02-19 05:25:01
【问题描述】：

如何在谷歌浏览器上解决这个问题：

当我尝试测试响应能力时，这是在我的网站 (www.haagsehof.nl) 上。这就是发生的事情。

它应该看起来像这样：

即使这个也不正确，你可以看到头部丢失了。我认为这是 WordPress 内部的 CSS 问题。因为我在 WordPress 中使用自定义 HTML 制作了这个部分，你可以在这里看到：

<!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>

这里出了什么问题，我怎样才能显示完整的图像，你可以向上和向下滚动并且它对于电话设备和普通计算机具有相同的样式？多谢。

===编辑=== 使用后：

#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 建议，这就是发生的情况，对于移动设备，图像不完整，我不明白为什么这么难：

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

【问题讨论】：

什么尺寸？似乎已经正常工作了？
@vel 好吧，在普通的 chrome 窗口中它很好，但是当你像手机一样缩小它时，图像就消失了（白色背景），文本也是白色的，在普通的 chrome 版本中，照片中的人物头像不见了。这就是问题你能看到这些东西吗？
您需要更改移动版 div 中的背景图片。我想我已经说过了。您现在有 FTP 访问权限了吗？
@vel 我可以通过 cpanel 访问服务器！
你需要添加一些类到中心 div。

标签： html css wordpress

【解决方案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;
    }

【讨论】：

（几乎）在 div 中获得完整图像的唯一方法是扩大 div。对于移动端：由于图片的纵横比，无法获取全图 -> 可以获取全图，但不会覆盖div，或者可以覆盖div，但不能覆盖整个图将可见。
我觉得手机版看不到整张图就好了，只要中间的两个人能看到一部分就可以了。我可以通过将图像调整为更小的尺寸来做到这一点吗？
至少尝试一下是个好主意。如果您在移动版本中使用background-size:cover;，它应该可以正常工作。
@Ruben Pauwels 没用，背景图像是白色的，当我这样做时 @media only screen and (max-width: 699px) { itys 显示图像但放大了，我正在使用这个版本的图像：`haagsehof.nl/content/uploads/2018/03/… `
你可以在portret模式下制作图像（例如：700x1000）吗？这将更适合您的用例。您提到的问题是由于图像的纵横比造成的。

【解决方案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%; */

        }
    }

【讨论】：