Блог

В первый раз я боролся за решение, поэтому я снова публикую дополнительную информацию. Заранее спасибо за ваш отзыв.

На веб-сайте, который я создаю в данный момент, у меня есть 2 фоновых изображения, настроенных на 2 разных раздела, но они должны идеально совпадать на всех устройствах.

На данный момент фоновые изображения выстраиваются в линию шириной 1920 пикселей и меньше, но как только вы начинаете увеличивать размер, он начинает смещаться.

Пожалуйста, кто-нибудь может помочь?

Пожалуйста, посмотрите на изображение здесь, которое должно напоминать

 .productTopSection {
  background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center;
  min-height: 895px;
  background-size: auto 100%, cover;
}

.mc-key-points {
  background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center;
  min-height: 895px;
  background-size: auto 100%, cover;
}

@media only screen and (min-width: 1921px) {
  .productTopSection {
    background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center center;
    min-height: 895px;
    background-size: cover;
  }

  .mc-key-points {
    background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center center;
    min-height: 895px;
    background-size: cover;
  }
}

@media only screen and (max-width: 1200px) {
  .productTopSection {
    background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg") no-repeat center center;
    background-size: cover;
  }

  .mc-key-points {
    background: none;
  }
}  

 <div class="productTopSection g-py-200">
  <!-- Content Goes Here -->
</div>


<div class="mc-key-points g-py-200">
  <!-- Content Goes Here -->
</div>  

 @media only screen and (max-width: 767px)
.productTopSection {
    background-size: cover;
    height: 200px;
    min-height: auto;
}
  

с тех пор нет контента, я думаю, что это так. поправьте меня, если я ошибаюсь

Ваш пример не работает, ну, это не имеет значения, я постараюсь вас понять

1. Сначала он трубит, чтобы понять, как это работает

Синяя рамка — это ваш div в полноэкранном режиме (один элемент на всю страницу) поскольку div не имеет высоты, вы присваиваете ему минимальную высоту или фиксированную высоту (свойство height), в вашем случае это работает одинаково только с фоном и до тех пор, пока вы не поместите что-либо в div

На этом этапе вам нужно понимать, что указанная вами высота не влияет на высоту самого изображения, то есть минимальная высота не изменится, пока вы не добавите в него много текста (это всего лишь пример, вы можете поместить все, что хотите, с высотой)

2. На изображении я продемонстрировал свойство background-size со значением 100% auto. из документации мы видим, что мы устанавливаем ширину 100% и оставляем высоту автоматически, также по умолчанию bakcground-image имеет ту же позицию (background-poistion: 0% 0%)

Если вы напишете все это следующим образом:

 background-size: 100% auto;
background-position: 0 0; // this is not required as this is the default, I am just using this as an example
  

мы получим результат, как на картинке выше, где изображение будет растянуто по ширине относительно экрана

что ж, теперь мы уменьшаем ширину экрана (div автоматически начинает изменять ширину и принимает ширину экрана)

что мы видим? под ним пустое пространство! В вашем случае вы автоматически устанавливаете высоту на 100% и ширину

 background-size: auto 100%;
  

и да, вы не должны использовать синтаксис нескольких фоновых изображений в вашем случае

  background-size: auto 100%, cover; // you have one background image
  

Вот как выглядит ваш нерабочий результат:

Обратите внимание, что я вижу, что вы используете центральное расположение, поэтому у вас есть два отверстия! С чем я вас и поздравляю!

Что вам следует делать? Вы должны использовать изображение (html-тег img) вместо фона

Пример:

 <img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
    img {
        display: block; // Remove inline native space
        width: 100%;
    }
</style>
  

или используйте media для управления высотой div (используйте vh вместо пикселей или css-медиа-запросов)

 <style>
    div {
        /*.....*/
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        min-height: 60vh;
    }

    /* OR */

    div {
        /*....*/
        min-height: 875px;
    }
    @media screen and (max-width: 1024px) {
        div {
            min-height: 500px; 
        }
    }
</style>
  

Хотя мне не ясно, планировали ли вы обрезать стороны изображения на мобильных устройствах, я думаю, что это может помочь по крайней мере — для чего-то подобного, я думаю, вы можете сделать это намного проще, используя <img> тег в HTML вместо background-image в CSS.

Проблема заключается в том, чтобы высота масштабировалась пропорционально ширине, чтобы изображения сохраняли свое соотношение сторон. Что происходит в вашем коде, так это то, что высота фактически устанавливается на 895 пикселей с помощью min-height , она не увеличится, если вы не добавите достаточное количество содержимого в div.

Итак, начиная с мобильных экранов, ваша высота по-прежнему составляет 895 пикселей, а боковые стороны изображений будут обрезаться все реже и реже, пока вы не достигнете ширины 1920 пикселей (ширина изображения). Как только вы перейдете к этому, изображение начнет растягиваться шире, чтобы покрыть, а верх / низ начнут обрезаться. Обрезка сверху / снизу, когда изображения расположены по центру, приводит к тому, что края изображения не совпадают. Поскольку вы теперь выстраиваете, скажем, на 20% вверх по верхнему изображению и на 20% вниз по нижнему, когда вы планировали, что выравнивание составит 0%.

Итак, как <img> тег упрощает это?

Это добавляет ширину / высоту содержимого вашему контейнеру и позволяет контейнеру расширяться, чтобы вместить содержимое, или принудительно сжимать содержимое, чтобы оно поместилось в нем. если вы просто добавите изображение в div, вы увидите, что оно расширяет div до размеров img.

Но если вы установите ширину равной 100% как для контейнера, так и для img, это заполнит ширину контейнера. Ключевым моментом является то, что высота будет пропорционально установлена для поддержания соотношения сторон, а div будет увеличиваться в высоту, чтобы соответствовать необходимой высоте изображения, и у вас не будет обрезки сверху / снизу, чтобы края выровнялись.

Тогда вам просто нужен контейнер с абсолютным расположением над img, чтобы разместить текстовое содержимое там, где вы хотите.

Если бы вы пытались обрезать размеры изображения на маленьких экранах (что, я думаю, выглядело бы лучше). Я бы посоветовал вам использовать медиа-запросы там просто для установки некоторых точек останова, где, возможно, изображение имеет ширину 120% на телефонах и в центре — у вас все равно будет такая высота, хотя, если она слишком высока и вам нужно обрезать, чтобы уменьшить высоту, у меня есть идея для этого, но я не хочу слишком сильно расширять область видимости…

Вот пример с <img> — здесь происходит гораздо меньше и более простой IMO. И вы получаете больше контроля — вы можете многое изменить, чтобы обрезать, как вы хотите, при разных медиа-запросах.

 .productTopSection, .mc-key-points {
  position: relative;
  width: 100%;
}

.responsive-img {
  width: 100%;
}

.overlay-content {
  position: absolute;

  /* just to get started with the content positioning */
  top: 50%;
  transform: translateY(-50%)
}  

 <div class="productTopSection g-py-200">
  <img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg">
  <div class="overlay-content">
    Content Goes Here!
  </div>
</div>


<div class="mc-key-points g-py-200">
  <img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg">
  <div class="overlay-content">
    Content Goes Here!
  </div>
</div>