web-dev-qa-db-fra.com

OWL CAROUSEL hauteur fixe?

J'utilise actuellement Owl Carousel et je me demande s'il est possible d'ajuster la taille des images afin que la hauteur de chaque image soit cohérente. J'utilise ce plug-in pour afficher mes photographies. Les formats Paysage et Portrait sont également disponibles. J'ai essayé d'utiliser autoWidth dans le JS, mais cela rend mes images de portrait trop volumineuses et mes images de paysage trop courtes. Comment puis-je obtenir une hauteur définie pour toutes les images? être derrière l'image suivante et n'affiche pas toute la largeur. Il semble y avoir une largeur définie et lorsque je modifie la largeur, l'image est simplement étirée. J'ai 19 articles dans le carrousel. Nous avons également essayé d’ajuster les éléments de la partie réactive du JS. Lorsque je l’ajuste sur deux éléments, les images en mode paysage ont les bonnes proportions mais les images en portrait sont finalement étirées. Des idées sur comment réparer?

Voici le code CSS que j'ai utilisé:

    #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
        }
      }
    })
  })
javascriptjqueryhtmlcssowl-carousel
6
abc0213

Si vous utilisez Bootstrap, ajoutez la classe img-responsive:

<img class="img-responsive">

Cela a fonctionné pour moi, je faisais également face au même problème.

2
JpG

essayez de jouer avec quelque chose comme ça:

display:block; height:500px !important; margin:0 auto 30px;
0
NoWomenNoCry