0

Я верстаю сайт, у меня на нем есть карусель (owl-carousel) с фото (ширина основного изображения 500px).

Мне нужно чтобы эта карусель помещалась на телефонах (где ширина окна может быть меньше 500px). При задании контейнера с шириной меньше 500px, часть контента просто обрезается.

Каким образом можно уменьшить весь элемент не пытаясь уменьшать по отдельности все его части (так как это сделать трудно)? Возможно есть какое-то простое решение, но я верстаю впервые, поэтому видимо не вижу решения.

  1. Карусель которую нужно уменьшить

Карусель которую нужно уменьшить

  1. Что происходит когда элемент не вмещается

Что происходит когда элемент не вмещается

  1. Что происходит когда уменьшается ширина контейнера-родителя

Что происходит когда уменьшается ширина контейнера-родителя

2
  • А вы уверены, что owl-carousel отрабатывает событие resize? Возможно стоит уменьшить экран, перезагрузить страницу и owl-carousel сама подстроится под доступные размеры. Commented 2 мая в 15:13
  • Нет, она точно сама не подстраивается под нужные размеры
    – Serosha
    Commented 3 мая в 10:15

1 ответ 1

0

Можно использовать величину блока в vw (процент относительно ширины экрана. 100vw - 100% ширины экрана). Или можно иcпользовать @media, чтобы изменять свойства элементов при определенной ширине экрана

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.