Làm cách nào để thay đổi chiều cao vùng chứa để phù hợp với chiều cao hình ảnh?

Question

Tôi đã sử dụng Foundaiton Orbit thanh trượt hình ảnh và thấy nó tuyệt vời. Bây giờ tôi đang gặp rắc rối với chiều cao.

Tôi có một số hình ảnh trong thư viện cao hơn đáng kể so với các thư viện khác và do đó vùng chứa chứa thư viện được đặt ở độ cao của hình ảnh 'cao nhất'. Có anyway thay đổi nó để container thích nghi chiều cao của nó theo chiều cao của hình ảnh hiện tại mà nó được hiển thị?

Click here for live example of site

đây là mã:

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

cảm ơn!

Answer 1

trong trường hợp của bạn tôi nghĩ rằng nó sẽ là đủ để thêm chút mã này vào file css của bạn:

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

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

Tôi hy vọng nó giúp

Answer 2

Tôi đã tìm thấy một giải pháp để sửa chữa auto vấn đề chiều cao với Orbit Slider.

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

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

Tôi hy vọng nó sẽ giúp