Html 如何更改容器高度以匹配图像高度?

Html 如何更改容器高度以匹配图像高度?,html,css,height,zurb-foundation,orbit,Html,Css,Height,Zurb Foundation,Orbit,我一直在使用Foundaiton轨道图像滑块,发现它很棒。现在我的身高有问题 我在图库中有一些图像比其他图像高得多,因此包含图库的容器设置为“最高”图像的高度。是否有任何方法可以更改它,以便容器根据其显示的当前图像的高度调整其高度 代码如下: <div class="slideshow-wrapper preloader"> <ul data-orbit data-options="animation:fade;

我一直在使用Foundaiton轨道图像滑块,发现它很棒。现在我的身高有问题

我在图库中有一些图像比其他图像高得多,因此包含图库的容器设置为“最高”图像的高度。是否有任何方法可以更改它,以便容器根据其显示的当前图像的高度调整其高度

代码如下:

        <div class="slideshow-wrapper preloader">
            <ul data-orbit  data-options="animation:fade;
                pause_on_hover:false;
                animation_speed:500;
                timer_speed: 4000;
                navigation_arrows:true;
                slide_number: false;
                swipe: true;
                bullets:false;">

      <li>
         <img src="img/jpg/weapon-wall.jpg" alt="Armoury Tromp l'oeil">
      </li>
       <li>
          <img src="img/jpg/vikings.jpg" alt="Vikings attacking from the sea mural">
      </li>
      <li>
         <img src="img/jpg/chariot.jpg" alt="Ancient chariot Trompe l'oeil">
      </li>
      <li>
          <img src="img/jpg/egypt.jpg" alt="Karen specialises in Trompe l'oeil, Egypt">
      </li>
      <li>
          <img src="img/jpg/army.jpg" alt="army Trompe l'oeil">
      </li>



  </ul>

谢谢

在您的情况下,我认为在css文件中添加以下代码就足够了:

.orbit-slides-container{
    height: auto !important;
}

.orbit-container .orbit-slides-container li.active{
    position:static;
}

我希望这有帮助

我找到了一个解决方案,可以解决轨道滑块的自动高度问题

.orbit-slides-container{
    height: 100% !important;
}

.orbit-container .orbit-slides-container li.active{
    position:relative;
}
我希望有帮助

.orbit-slides-container{
    height: 100% !important;
}

.orbit-container .orbit-slides-container li.active{
    position:relative;
}