gpt4 book ai didi

html - 指定图像宽度全尺寸 WordPress

转载 作者:行者123 更新时间:2023-11-28 02:00:11 25 4
gpt4 key购买 nike

如何在 google chrome 上解决这个问题:

enter image description here

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

它应该是这样的: enter image description here

即使是这个也不正确,如您所见,头像不见了。我认为这是 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>

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

===编辑===使用后:

#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 建议,这是发生的事情,对于移动设备,图像不完整,我不明白为什么这如此困难: enter image description here

这是针对移动版本的,我该如何解决这些问题,我有多种解决方案,但似乎都无法解决此问题: enter image description here

最佳答案

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

关于html - 指定图像宽度全尺寸 WordPress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49363465/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com