Привет. Я установил официальный компонент темы: Advanced Search Banner, и он полезен. Меня беспокоит только одна вещь. Я загрузил фоновое изображение для поискового баннера, но, похоже, оно подстраивается, обрезая правую часть при сужении экрана. Не знаю, как это описать, но вот несколько скриншотов:
По умолчанию компонент настраивает одно фоновое изображение для отображения на различных устройствах следующим образом. Для фонового изображения используется свойство background-size: cover в CSS (подробнее здесь: background-size CSS property - CSS | MDN).
Таким образом, по умолчанию фоновое изображение будет изменяться в размере так, чтобы всегда полностью покрывать фон контейнера.
Можно было бы внести одно улучшение, добавив альтернативное изображение для мобильных устройств в этот компонент, но даже в этом случае, скорее всего, отдельные сайты будут вынуждены добавлять некоторый CSS для определённых ширины экрана, если у них есть специфические требования к фоновому изображению (в данном случае это не помогло бы, так как проблема возникает на ширинах, превышающих мобильные). В случае с Wyze у них установлена кастомизированная версия компонента для поддержки их конкретных потребностей.
Что касается конкретных изменений в CSS, следующее решение может улучшить поведение фонового изображения в вашем случае.
Возможно, вам также потребуется задать различное поведение для разных ширины экрана, например:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // если ширина экрана меньше 1000 пикселей
background: none; // скрыть фон
}
}
