Wordpres заголовок фоновое изображение

Question

Эй, мне было интересно, кто-нибудь может мне помочь. Поэтому я стилизовал заголовок шаблона в css и дал ему другое фоновое изображение, и оно отлично работает, единственная проблема, с которой я столкнулся - на мобильном телефоне. На мобильном телефоне, кажется, белый пробел справа от изображения, и мне было интересно, если кто-нибудь знает решение этой проблемы? Если кто-нибудь знает решение этой проблемы, было бы здорово помочь!

Спасибо

Answer 1

Ваш элемент заголовка -

<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-узлов, так как в любом случае вам понадобится тег изображения.