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 節點，因為無論如何你都需要圖片標簽。