How do I change container height to match image height?

Question

I've been using Foundaiton Orbit image slider and found it great. Now I am having trouble with the height.

I have some images in the gallery that are considerably 'taller' than others and therefore the container that contains the gallery is set to the height of the 'tallest' image. Is there anyway of changing it so the container adapts it's height according to the height of the current image that it is showing?

Click here for live example of site

here is the code:

        <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; }
    }

thanks!

Answer 1

in your case I think it would be enough to add this bit of code to your css file:

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

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

I hope it helps