В настоящее время я использую Owl Carousel и задаюсь вопросом, есть ли способ настроить размеры изображений так, чтобы высота каждого изображения была согласованной. Я использую этот плагин для отображения моей фотографии, и у меня есть как пейзаж, так и портрет. Я пробовал использовать autoWidth в JS, но это слишком сильно уменьшает мои портретные изображения, а мои пейзажные изображения слишком коротки, как я могу получить все изображения с заданной высотой? Я попытался настроить CSS, но пейзажные изображения, по-видимому, находятся за следующим изображением и не отображают полную ширину. Похоже, что существует заданная ширина, и когда я настраиваю ширину, изображение просто растягивается. У меня есть 19 предметов в карусели. Также попытался настроить элементы в чувствительной части JS, когда я настраиваю его на два элемента, пейзажные изображения являются правильными пропорциями, но портретные изображения в конечном итоге растягиваются. Любые идеи о том, как исправить?OWL CAROUSEL фиксированная высота?
Вот код CSS я использовал:
#demos img{
display: inline-block;
max-width: auto;
height: 500px!important;
margin-bottom: 30px;
}
Javascript:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true,
loop: true,
margin: 0
}
}
})
})
Попробуйте дать высоту и ширину в px, а затем дать максимальную высоту в px. Рабочая демонстрация на jsfiddle или codepen была бы замечательной. –
это работает, однако, отзывчивость выглядит плохо, потому что все изображения сейчас огромны. Есть ли способ настроить размеры так, чтобы высота не была согласованной в мобильном режиме? – rubyred2
Вы можете попробовать использовать обложку фонового размера. –