Адаптивный баннер на главной во всю ширину без "обрезаний" при уменьшении ширины

ivangretsky добавил(а) 4 года назад
Отложено

Мы используем баннер на главной во всю ширину, но не делаем его композитным (состоящим из нескольких изображений), как в примерах на демо-сайте, а всё помещаем на фон. Но сейчас баннер сделан так, что при уменьшении экрана часть баннера "обрезается" как сверху и снизу, так и по бокам.


Я хотел бы добиться эффекта примерно как на https://dodopizza.ru/, то есть чтобы фоновое изображение не обрезалось бы при уменьшении экрана, а масштабировалось бы, занимая всю ширину. Чтобы можно было использовать всё ширину и высоту баннера, не опасаясь, что она будет не видна на некоторых экранах.

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


При этом мы пользуемся отдельной версией баннера для мобильных устройств. Я говорю о поведении фона баннера до перехода к показу этой мобильной версии (или на всех ширинах, если мобильной версии баннера нет).

Ответы (8)

фото
1

Добрый день. Вопрос 5 месяцев в рассмотрении. Можно узнать, когда по нему будет принято решение? Есть какой-то регламент обработки обращений?

фото
1

Для баннера во всю ширину конечно может и вопрос возникнуть в реализации, а вот иметь такую возможность для баннера на ширину тела сайта было бы хорошо. У нас очень многие клиенты хотят видеть обычный не составной баннер

фото
1

Я очень давно, на ранних стадиях предлагал сменить сам плагин слайдера на более гибкий, где можно кастомно в js вносить настройки. Ответ: у нас нет такое в планах. Кстати, туда же мой тикет по поводу подложки для фона.

Я за этот пост.

фото
1

Поддерживаю!

фото
4

Пару недель назад обращался с аналогичным вопросом в поддержку Аспро - сказали, что могут реализовать это на платной основе в индивидуальном порядке. Но тут я вижу, что данная проблема и запрос не только у меня. Поддерживаю обеими руками!

фото
1

Здравствуйте! Спасибо за обратную связь. Понимаем, что пользователи привыкли к стандартному размещению баннеров, но оно не универсально, так как при масштабировании в мобильной версии баннеры будут слишком узкими, и текст будет менее читабельным. Если бы пропорции изображения сохранялись на меньших разрешениях, то изображение потеряло бы вид и удобочитаемость: http://joxi.ru/ZrJZyZlHMNE5Vr. Поэтому мы создали компоновку баннера по такому принципу. Таким образом баннеры корректно отображаются на всех устройствах, но только при условии соблюдения безопасной зоны.


Вам необходимо поместить важную информацию в безопасную зону. Тогда изображение не будет обрезаться, а будет корректно адаптироваться, при этом центрироваться. Это самый оптимальный вариант, чтобы баннеры отображались корректно и на смартфонах, и на планшетах, и на десктопах. Даже на сайтах крупных компаний соблюдается безопасная зона:

М. Видео — http://joxi.ru/n2Yo3gWFZDye5r;

Ozon — http://joxi.ru/823aR6McD3On4r.

фото
3

Странное заявление - на мобильной версии у вас подключается дополнительный баннер, разработанный именно для мобайла. Таким образом остается только вопрос по адаптиву для разрешения до 1024px.

Сейчас, даже при соблюдении безопасной зоны, контент баннера обрезается и фоновое изображение, которое в любом случае не получается подогнать под корректное отображение, т.к. у вас изображение выводится через background-image и обрезается от центра. Проблема решается максимально просто - выведите фоновое изображение через тег img и задайте размер в процентах.

Я понимаю, почему вы топите за текущий вариант - у вас много блоков в которых слайдер окружен другими баннерами и для них тоже надо задавать размер в процентах, что бы масштабирование всего контейнера было правильным. Это работа.

Но поймите, мы решаем задачи продаж через баннеры. И данный вопрос поднимается постоянно - нам, как пользователям нужен этот функционал для создания контента, который продает наши товары. Ваше видение понятно - все упирается в техническую составляющую, а наше - в прибыль от продаж. Мы не можем полноценно использовать важный момент - баннеры в слайдере на главной странице. Больший процент трафика обычно приходится на главную страницу по витальным запросам, где пользователи видят слайдер с некачественным контентом. Мы, как пользователи решения, просим вас нам помочь и сделать ваше решение лучше и конкурентоспособнее.

У меня порядка четырех проектов развернуто на Нексте, два на Максимуме. Заказчики разные и у всех одна и та же проблема, не важно какая отрасль бизнеса отражена на сайте. На Максимуме пробовали делать по вашим же рекомендациям баннеры - все равно подрезка идет при ресайзе. Я эту проблему поднимал на Маркетплейсе 1С. Там мне ответили, что надо делать безопасные зоны. Но на Full HD экранах они выглядят отвратительно - контент баннера собран в кучу, а вокруг пустота.

Это реальная проблема в ваших решениях, которую необходимо решить. И уже много раз предлагалось самое банальное решение - задать размер в процентах.

фото
2

На каждом проекте, что бы вывести баннер с фоном надо допиливать верстку, что бы скрыть текст с баннера. И это приходится делать из раза в раз.

фото
фото
5

Добрый день!


С учётом возможности делать отдельный вариант баннера для мобильных, масштабируемый необрезанный баннер будет нормально отображаться везде. И мы говорим не о том композитном баннере, который Вы демонстрируете, а о баннере ТОЛЬКО с задним фоном, который гораздо удобней делать, и который позволяет гораздо лучше использовать место, решать дизайнерские задачи. Именно его хотят клиенты, потому что с ним просто работать.


Прошу Вас вернуться к рассмотрению этого вопроса. Вы отвечаете не на предложение, а описываете текущую ситуацию, которая ясна.

фото
3

Абсолютно с вами согласен.

фото
1

Добрый день!

Хочу поинтересоваться, найдено ли решение данной проблемы с масштабированием баннеров?

фото
фото
1

Поддерживаю, на больших экранах баннер с безопасной зоной выглядит мягко говоря пустым. Просим адаптивность!

Комментировать
 
Прикрепить файлы