0

我正在使用GlideJS显示带有图像的轮播。我通过调用以下代码将此轮播加载到文件 A ( carousel-test.php ) 中：

<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 像素。开始使用轮播后，刷新页面或打开控制台。日志图像的高度会发生变化并变为应有的状态（100%）。

第一次打开页面时，如何将轮播中图像的高度显示为100％？

（注意：要重现此问题，请务必在访问文件 A后在浏览器中打开一个新选项卡，如果您只刷新文件 A的页面，则问题不会再次出现）

4

1 回答 1

0

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

于 2017-08-19T13:50:40.817 回答