OWL CAROUSEL hauteur fixe?

Je suis actuellement en utilisant Owl Carousel, et je me demande si il existe un moyen de régler les tailles d'image, de sorte que la hauteur de chaque image est cohérente. J'utilise ce plugin pour afficher mes photos, et j'ai à la fois paysage et portrait tailles. J'ai essayé d'utiliser autoWidth dans le JS, mais il fait mon portrait, les images trop grandes et mon paysage des images trop court, comment puis-je obtenir toutes les images pour avoir un jeu de la hauteur?
J'ai tenté d'ajuster le CSS, mais le paysage des images qui semblent être derrière l'image suivante et n'affiche pas la totalité de la largeur. Il semble qu'il y est un ensemble de largeur, et quand je ajuster la largeur, l'image devient tendu. J'ai 19 articles dans le carrousel. Aussi tenté d'ajuster les éléments de la partie sensible de la JS, quand je l'ajuster à deux éléments, le paysage, les images sont les bonnes proportions, mais le portrait, les images finissent par être tendu. Toutes les idées sur la façon de résoudre?

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
        }
      }
    })
  })
Essayez de donner la largeur et la hauteur en px et puis lui donner un max de hauteur en px. Un travail de démonstration sur jsfiddle ou codepen serait génial.
il fonctionne, cependant, la réactivité est de mauvaise qualité parce que toutes les images sont énorme maintenant. Est-il un moyen de régler les tailles de sorte que la hauteur n'est pas compatible en vue de téléphone portable?
Vous pouvez essayer d'utiliser un background-size:cover.

OriginalL'auteur abc0213 | 2016-12-29

  1. 2

    Si vous êtes en utilisant Bootstrap, puis ajouter le img-responsive classe:

    <img class="img-responsive">

    Cela a fonctionné pour moi, j'ai été confrontée au même problème.

    et si il ne l'est pas?

    OriginalL'auteur JpG

  2. 0

    essayer de jouer avec quelque chose comme ceci:

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

    OriginalL'auteur NoWomenNoCry