猫头鹰轮播：图像高度问题

Question

Hello StackOverflow community.

In my new Java EE project I decided to use Owl Carousel, a powerful, flexible, and easy to use plugin to display some available gifts to win.

I noticed some unwanted behaviour regarding the customization of the images height.

Here is an image of the page using owl carousel but without customization of the height of images :

Here is an image of the page using owl carousel with customization of the height of images :

here is the code i'm using ti generate the carousel :

 $(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items: 6, //10 items above 1000px browser width itemsDesktop: [1199, 4], //5 items between 1000px and 901px itemsDesktopSmall: [979, 3], // betweem 900px and 601px itemsTablet: [600, 2], //2 items between 600 and 0 itemsMobile: [479, 1] // itemsMobile disabled - inherit from itemsTablet option }); // Custom Navigation Events $(".next").click(function() { owl.trigger('owl.next'); }) $(".prev").click(function() { owl.trigger('owl.prev'); }) $(".play").click(function() { owl.trigger('owl.play', 1000); //owl.play event accept autoPlay speed as second parameter }) $(".stop").click(function() { owl.trigger('owl.stop'); }) }); 

 .img { display: inline-block; max-width: 100%; height: 130px; /* the problem (if you remove it, the carousel works !!!! )*/ margin-bottom: 30px; } #owl-demo .item { color: #FFF; height: 250px; text-align: center; border: 1px solid rgb(228, 228, 228); border-radius: 0.6em; margin: 3px; background: #93C572; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script> <div class="row"> <h4 style="text-align: center;">Cadeaux À Votre Portée</h4> <div class="customNavigation"> <img src="http://placehold.it/500" style="margin-right: 20px;" /><a class="btn prev">&lt;</a> <a class="btn next">&gt;</a> <img src="http://placehold.it/500" style="margin-left: 20px;" /> </div> </div> <div class="row"> <div id="owl-demo" class="owl-carousel owl-theme"> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">1700 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">1250 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">900 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">3000 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">1500 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">900 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 PTs</div> </p:panel> <p:panel styleClass="item"> <div class="row"> <p:graphicImage styleClass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">Lorem Ipsum</div> <div class="row"> <p:commandButton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 PTs</div> </p:panel> </div> </div> 

---EDITED---

May be I wasn't very clear about what is the problem :

• If I don't edit the height of the images inside the carousel it works fine like in the first image. (CSS is in a separate file)
• If I try to edit the height of the images inside the carousel the page becomes blank like in the second image. (CSS is in a separate file)

I'm not very familiar with jQuery and JavaScript so I don't understand what is the reason of this behaviour.

----EDITED 2----

THIS PROBLEM IS PRESENT ONLY IN GOOGLE CHROME , NOT IN INTERNET EXPLORER AND NOT IN MOZILLA FIREFOX .

Answer 1

I solved the problem by just updating the height of the images from 130px to 135px , i just found this solution randomly but still i don't understand the reason behind the problem or the solution.

Old CSS code :

.img {  display: inline-block;  max-width: 100%;  height: 130px;    margin-bottom: 30px; }

New CSS code :

.img {  display: inline-block;  max-width: 100%;  height: *135px*;  margin-bottom: 30px;}