WordPress Header 背景图片

Question

我在 WordPress 网站上工作，并在 CSS 中设置了模板 header 的样式。 我给了它一个不同的背景图像，它正在工作，我唯一的问题是在移动设备上。

在移动设备上，图像右侧似乎有一个白色间隙，我想知道是否有人知道这个问题的解决方案？

Answer 1

你header元素—

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

有一个min-height:100px集。 增加该数字，直到图像一直穿过。 试试112px 。

Answer 2

对于我自己了解到的图像，最好使用纵横比定义容器，这样它就会被迫占用你想要的空间。 然后将图像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 节点，因为无论如何你都需要图片标签。