我一直在使用 Foundaiton Orbit 图像 slider ，发现它很棒。现在我的高度有问题。

我在画廊中有一些图像比其他图像“高”很多，因此包含画廊的容器被设置为“最高”图像的高度。无论如何改变它，以便容器根据它显示的当前图像的高度调整它的高度？

Click here for live example of site

代码如下:

        <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:

.data-orbit img {
  max-width: 70%;
  min-height:auto;
}

/* Orbit Graceful Loading */
.orbit-container ul li { min-height: auto; overflow: hidden; }
.orbit-container ul li img { width: 100%; }



.slideshow-wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block;}
       .slideshow-wrapper .orbit-container li .orbit-caption p {
              color: white;
              margin-left: 45px;
              font-size: 14px;
              font-family: "Open Sans"; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555555 white;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  height: auto;
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 60%; }
    .orbit-container .orbit-slides-container.fade li {
      opacity: 0;
      transition: opacity 500ms ease-in-out;
      -ms-transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
      .orbit-container .orbit-slides-container.fade li.animate-in {
        opacity: 1;
        z-index: 20;
        transition: opacity 500ms ease-in-out; }
      .orbit-container .orbit-slides-container.fade li.animate-out {
        z-index: 10;
        transition: opacity 500ms ease-in-out; }
    .orbit-container .orbit-slides-container.swipe-next li {
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-next li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-next li.animate-out {
        -ms-transform: translate(-100%, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container.swipe-prev li {
      -ms-transform: translate(-100%, 0);
      -webkit-transform: translate3d(-100%, 0, 0);
      -moz-transform: translate3d(-100%, 0, 0);
      -o-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-out {
        -ms-transform: translate(100%, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container li.active {
        opacity: 1;
        top: 0;
        left: 0;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); }
      .orbit-container .orbit-slides-container li .orbit-caption {
        position: absolute;
        bottom: 0;
        background-color: rgba(51, 51, 51, 0.8);
        color: white;
        width: 100%;
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem; }
  .orbit-container .orbit-slide-number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0);
    z-index: 10; }
    .orbit-container .orbit-slide-number span {
      font-weight: 700;
      padding: 0.3125rem; }
  .orbit-container .orbit-timer {
    position: absolute;
    top: 12px;
    right: 10px;
    height: 6px;
    width: 100px;
    z-index: 10; }
    .orbit-container .orbit-timer .orbit-progress {
      height: 3px;
      background-color: rgba(112, 180, 191, 1);
      display: block;
      width: 0%;
      position: relative;
      right: 20px;
      top: 5px; }
    .orbit-container .orbit-timer > span {
      display: none;
      position: absolute;
      top: 0px;
      right: 0;
      width: 11px;
      height: 14px;
      border: solid 4px #70B4BF;
      border-top: none;
      border-bottom: none; }
    .orbit-container .orbit-timer.paused > span {
      right: -4px;
      top: 0px;
      width: 11px;
      height: 14px;
      border: inset 8px;
      border-left-style: solid;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      border-color: transparent #70B4BF transparent transparent; }
      .orbit-container .orbit-timer.paused > span.dark {
        border-color: transparent #333333 transparent transparent; }
  .orbit-container:hover .orbit-timer > span {
    display: block; }
  .orbit-container .orbit-prev,
  .orbit-container .orbit-next {
    position: absolute;
    top: 45%;
    margin-top: -25px;
    width: 36px;
    height: 60px;
    line-height: 50px;
    color: white;
    background-color: transparent;
    text-indent: -9999px !important;
    z-index: 10; }
    .orbit-container .orbit-prev:hover,
    .orbit-container .orbit-next:hover {
      background-color: rgba(0, 0, 0, 0.3); }
    .orbit-container .orbit-prev > span,
    .orbit-container .orbit-next > span {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 0;
      height: 0;
      border: inset 10px; }
  .orbit-container .orbit-prev {
    left: 0; }
    .orbit-container .orbit-prev > span {
      border-right-style: solid;
      border-color: transparent;
      border-right-color: #7FA7B2; }
    .orbit-container .orbit-prev:hover > span {
      border-right-color: white; }
  .orbit-container .orbit-next {
    right: 0; }
    .orbit-container .orbit-next > span {
      border-color: transparent;
      border-left-style: solid;
      border-left-color: #7FA7B2;
      left: 50%;
      margin-left: -4px; }
    .orbit-container .orbit-next:hover > span {
      border-left-color: white; }
  .orbit-container .orbit-bullets-container {
    text-align: center; }
  .orbit-container .orbit-bullets {
    margin: 0 auto 30px auto;
    overflow: hidden;
    margin-left: -70px;
    position: relative;
    top: ;
    float: none;
    text-align: center;
    display: block; }
    .orbit-container .orbit-bullets li {
      display: inline-block;
      width: 0.5625rem;
      height: 0.5625rem;
      background: #cccccc;
      float: none;

      margin-right: 6px;
      border-radius: 1000px; }
      .orbit-container .orbit-bullets li.active {
        background: #CE3F3A; }
      .orbit-container .orbit-bullets li:last-child {
        margin-right: 0; }

.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
  display: none; }
.touch .orbit-bullets {
  display: none; }

@media only screen and (min-width: 40.063em) {
  .touch .orbit-container .orbit-prev,
  .touch .orbit-container .orbit-next {
    display: inherit; }
  .touch .orbit-bullets {
    display: block; } }
@media only screen and (max-width: 40em) {
  .orbit-stack-on-small .orbit-slides-container {
    height: auto !important; }
  .orbit-stack-on-small .orbit-slides-container > * {
    position: relative;
    margin-left: 0% !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    transition: none !important; }
  .orbit-stack-on-small .orbit-timer {
    display: none; }
  .orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev {
    display: none; }
  .orbit-stack-on-small .orbit-bullets {
    display: none; } }
[data-magellan-expedition], [data-magellan-expedition-clone] {
  background: white;
  z-index: 50;
  min-width: 100%;
  padding: 10px; }
  [data-magellan-expedition] .sub-nav, [data-magellan-expedition-clone] .sub-nav {
    margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
      margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
      line-height: 1.8em; }
    }

谢谢!

最佳答案

在您的情况下，我认为将这段代码添加到您的 css 文件中就足够了:

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

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

希望对你有帮助

关于html - 如何更改容器高度以匹配图像高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26827451/