我一直在使用Foundation Orbit图片轮播器,发现它非常好用。但是我现在遇到了高度上的问题。
我的相册里有一些比其他图片“更高”的图像,因此包含相册的容器高度被设置为“最高”图像的高度。是否有方法可以使容器根据当前显示的图像高度自适应调整其高度?
以下是代码:
<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; }
}
谢谢!