#image #twitter-bootstrap #scroll #carousel
#изображение #twitter-bootstrap #прокрутка #карусель
Вопрос:
Я очень новичок в bootstrap и программировании в целом, поэтому, пожалуйста, наберитесь терпения! Я буквально потратил часы, пытаясь найти решение своей проблемы через here / google, и пришло время обратиться за помощью!
По сути, я пытаюсь создать веб-сайт для отображения фотографий в карусели. Я хочу, чтобы мой сайт был отзывчивым, чтобы он работал на небольших устройствах. Все мои исходные изображения имеют одинаковый размер / размеры ( 2304 x 1728 поэтому 4:3 , вероятно, слишком большие) и используют img-responsive класс.
На большом экране это выглядит нормально, но когда я пробую это на экранах ноутбуков и планшетов меньшего размера, высота изображения приводит к появлению полос прокрутки, поэтому вы не можете видеть нижнюю часть изображения / подписи. Однако ширина изображения является адаптивной и сжимается без прокрутки.
Я понимаю, что размер карусели определяется размером изображения, поэтому логичным решением было бы уменьшить размер моего изображения по высоте, но мне нужно поддерживать соотношение сторон, а изображения меньшего размера выглядят не так хорошо. Я также попытался установить фиксированную высоту в качестве стиля, но это не сработало.
Каков идеальный размер изображения (в пикселях) для карусели, которая занимает большую часть окна браузера (с учетом панели навигации / верхнего / нижнего колонтитула), и как сделать так, чтобы высота не требовала полос прокрутки?
Заранее большое спасибо!
Комментарии:
1. Вы пробовали запрашивать носитель? @экран мультимедиа и (максимальная ширина устройства: 480 пикселей) и (ориентация: [книжная или альбомная]) {/* CSS здесь для изменения размера изображений */}
2. Используя css, вы можете использовать медиа-запросы и устанавливать максимальную высоту для элемента изображения в карусели. Вы бы хотели использовать медиа-запросы, потому что ваш рост на мобильном устройстве будет намного меньше, чем на устройстве шириной 2000 пикселей.
3. Мне нужно было бы немного почитать, поскольку я еще ничего не делал с медиа-запросами, и все это немного выше моей головы! Я рассмотрю это, спасибо. Полагаю, я надеялся, что есть простой класс или настройка высоты, которые я мог бы ввести, и это сделало бы работу! Принятие желаемого за действительное!
Ответ №1:
Мой ответ может быть принят не всеми, но я думаю, что единственным недостатком bootstrap является именно карусель начальной загрузки
Не может быть легко изменена (поскольку, как вы говорите, у вас мало опыта программирования) и не предлагает много настроек
Поэтому я думаю, что лучшим решением для вашей проблемы является Owlcarousel, предлагающий сотни вариантов настройки
OWL Carousel
Плагин jQuery с поддержкой Touch, который позволяет создавать красивые адаптивные слайдеры карусели.