Obecnie używam karuzeli Owl i zastanawiam się, czy istnieje sposób dostosowania rozmiarów obrazów, aby wysokość każdego obrazu była spójna. Używam tej wtyczki do wyświetlania mojej fotografii, a mam rozmiary zarówno krajobrazowe, jak i portretowe. Próbowałem używać funkcji autoWidth w JS, ale powoduje ona, że moje zdjęcia portretowe są zbyt duże, a obrazy w moim krajobrazie zbyt krótkie, jak mogę ustawić wszystkie obrazy na ustaloną wysokość? Próbowałem dopasować CSS, ale obrazy krajobrazu wydają się znajdować za następnym obrazem i nie wyświetlają pełnej szerokości. Wygląda na to, że istnieje ustawiona szerokość, a kiedy dostosowuję szerokość, obraz zostaje rozciągnięty. Mam 19 przedmiotów w karuzeli. Próbowałem również dopasować elementy w responsywnej części JS, gdy dopasowuję je do dwóch elementów, zdjęcia krajobrazowe mają odpowiednie proporcje, ale obrazy portretowe zostają rozciągnięte. Wszelkie pomysły na rozwiązanie problemu?OWL CAROUSEL stała wysokość?
Oto kod CSS Użyłem:
#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
}
}
})
})
Spróbuj podać wysokość i szerokość w px, a następnie podaj jej maksymalną wysokość w pikselach. Robiące demo na jsfiddle lub codepen byłoby świetne. –
działa, jednak reakcja wygląda źle, ponieważ wszystkie obrazy są teraz ogromne. Czy istnieje sposób dostosowania rozmiarów, aby wysokość nie była spójna w widoku mobilnym? – rubyred2
Możesz spróbować użyć tła-size: cover. –