Wordpres标头背景图片

Posted 2021-04-03

嘿，我想知道是否有人可以帮助我。因此，我在css中设置了模板标头的样式，并为其提供了不同的背景图片，并且它工作正常，唯一的问题是在移动设备上。在移动设备上，图片右侧似乎有白色缝隙，我想知道是否有人知道解决方案？如果有人知道解决方案，那将是很大的帮助！

谢谢

答案

您标题元素—

<header id="home" class="header menu-align-center" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
</header>

具有min-height:100px设置。增加该数字，直到图像完全显示为止。尝试112px。

另一答案

对于我自己了解的图像，最好使用宽高比来定义容器，这样它就不得不占用您想要的空间。然后将图像position: absolute放入容器内，并使用object fit: cover强制将其填充到父容器中，并将两个长度都设置为100％。然后，图像将自动填充100％的高度或宽度，无论二者是否需要：

<div class="image-container">
  <img src="...">
</div>

.image-container {
    &:before {
      /* create a 1px bar inside the container and stretch it according to padding-top */
      content: "";
      width: 1px;
      margin-left: -1px; /* 1px bar with -1px margin will make sure no space is taken */
      float: left;
      height: 0;
      padding-top: 50px / 150px * 100%; /* height / width ratio. So this would result in 3x as wide than high. 100% always refers to the width of the container which makes this trick work */
    }
    &:after { /* to clear float */
      content: "";
      display: table;
      clear: both;
    }

    img {
      position: absolute;
      width: 100%; 
      height: 100%;
      object-fit: cover;
    }
}

然后您还可以通过简单地在媒体查询中更改.image-container:before{padding-top:;}来使容器切换宽高比。

还请注意，充其量，<div>容器将被<picture>标签所取代，并提供一些不同的图像尺寸。然后，您可以提高性能，并且无需额外的DOM节点，因为无论如何都需要图片标签。