从外部文件加载旋转木马(GlideJS)后的图像高度问题

Question

我使用GlideJS来显示带有图像的旋转木马。我通过调用以下代码在文件A (carousel-test.php)中加载这个旋转木马：

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

File 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后在浏览器中打开一个新选项卡，如果只刷新文件A的页面，则不会再次出现问题)

Answer 1

你不能通过提供100%的图像来改变图像的高度，因为。图像高度已经是其高度的100%。如果你真的想改变你的图像的高度，那么你应该用px值来定义它，但是我建议你不要改变高度，因为它会拉伸你的图像。相反，您可以添加一定的高度到您的旋转木马包装和设置溢出隐藏。它将显示包装内的图像，溢出图像将被隐藏。