WordPress标题背景图片

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

You can see on the desktop version there is no white gap - https://imgur.com/a/Xg1QgSy On the mobile version though you can see the image doesn't go all the way across - https://imgur.com/a/7e5PBeI

如果有人知道解决方案,那将是很大的帮助!

谢谢

评论
  • Dora
    Dora 回复

    对于我了解的图像,最好使用宽高比定义容器,以免容器被迫占用您想要的空间。然后,将图像放置在容器内的绝对位置,并使用对象适配盖强制其填充,并将两个长度都设置为100%。然后,图像将自动填充100%的高度或宽度,无论二者是否需要:

    <div class="image-container">
      <img src="...">
    </div>
    
    .image-container {
        &:before {
          content: "";
          width: 1px;
          margin-left: -1px;
          float: left;
          height: 0;
          padding-top: 50px / 150px * 100%; // height / width ratio. So this would result in 3x as wide than high
        }
        &:after { /* to clear float */
          content: "";
          display: table;
          clear: both;
        }
    
        img {
          position: absolute;
          width: 100%; 
          height: 100%;
          object-fit: cover;
        }
    }