從外部文件（GlideJS）加載傳送帶後的圖像高度問題

我使用GlideJS顯示帶圖像的傳送帶。我在文件甲（carousel-test.php）通過調用下面的代碼加載此轉盤：從外部文件（GlideJS）加載傳送帶後的圖像高度問題

<div id="carouselContainer"></div> 
<script> 
$("#carouselContainer").load("carousel.php"); 
</script>

文件B（carousel.php）包含圓盤傳送帶的與所述圖像中的代碼：

<div class="module module--horizontal"> 
    <div id="Carousel" class="glide"> 
    <div class="glide__wrapper"> 
     <ul class="glide__track"> 
     <li class="glide__slide"> 
      <div class="box" style="background-color: #77A7FB;"> 
      <div> 
       <img src="http://www.brussels.info/grand-place-brussels.jpg" style="width:100%; height:100%;" /> 
      </div> 
      </div> 
     </li> 
     <li class="glide__slide"> 
      <div class="box" style="background-color: #FBCB43;"> 
      Second slide 
      </div> 
     </li> 
     </ul> 
    </div> 
    <div class="glide__bullets"></div> 
</div>

<script> var carousel = $('#Carousel').glide({ type: 'carousel', startAt: 1, touchDistance: 2, autoplay: 0, autoheight: true }); </script>

問題是，當您第一次打開文件A（http://reistip.nl/carousel-test.php）時，傳送帶中圖像的高度非常小。高度應爲100％，但是固定爲（約）20像素。一旦開始使用傳送帶，刷新頁面或打開console.log圖像的高度會發生變化並變爲原樣（100％）。

如何在第一次打開頁面時將傳送帶中圖像的高度顯示爲100％？

（注意：要重現此問題，確保訪問文件中的後，打開瀏覽器一個新的標籤，如果你只刷新文件的網頁A問題不會再次出現）

來源

2017-08-19 user3398797

你不能通過給100％來改變圖像的高度。圖像高度已經達到其高度的100％。如果你真的想改變你的圖像的高度，那麼你應該定義它的px值，但我建議你不要改變高度，因爲它會拉伸你的形象。相反，您可以將某些高度添加到旋轉木馬包裝並設置隱藏的溢出。它會顯示包裝內的圖像，並且溢出的圖像將被隱藏。

來源

2017-08-19 13:50:40

從外部文件（GlideJS）加載傳送帶後的圖像高度問題

回答

相關問題