我在响应式容器中放置了一个简单的 jquery 图像 slider 。 slider 响应式工作,但高度以像素为单位设置,这在其最大视口(viewport)宽度下看起来不错,但正如您可以想象的那样,在较小的视口(viewport)宽度下 slider 和内容之间的距离太大。
我想知道是否有一种简单的方法使用 CSS 或 jQuery 来动态设置包含图像 slider 的 div 的高度,以便它在所有视口(viewport)宽度下看起来都不错。
jQuery:
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
CSS:
.responsive-container {
width: 80%;
margin: 0 auto;
}
.responsive {
display: block;
max-width: 100%;
margin: 0 auto;
}
#slideshow {
position:relative;
height: 60%;
}
#slideshow div {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
background-color: #FFF;
}
#slideshow div.active {
z-index:10;
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
}
#slideshow div img {
display: block;
border: 0;
margin-bottom: 10px;
}
HTML:
<div id="slideshow" class="responsive-container">
<div class="active">
<img class="responsive" src="img/slider/image1.jpg" alt="Slideshow Image 1" />
</div>
<div>
<img class="responsive" src="img/slider/image2.jpg" alt="Slideshow Image 2" />
</div>
<div>
<img class="responsive" src="img/slider/image3.jpg" alt="Slideshow Image 3" />
</div>
</div>
有没有办法动态增加高度:
<div id="slideshow" class="responsive-container">
我不知道这是否重要,但最大图像尺寸为:531 像素宽 x 400 像素高。
最佳答案
离散高度过渡
CSS Media queries将允许您设置高度变化的离散宽度。
@media (max-width: 979px) and (min-width: 768px) {
#slideshow {
height: whatever;
}
}
有关这些工作原理的示例(如果您不熟悉它们)请在 CSS Tricks 网站上调整您的浏览器大小(请参阅上面的链接)。当您达到特定宽度时,您会看到布局发生变化。这就是媒体查询的作用。
连续高度过渡
对于连续的高度转换,您需要求助于 Javascript。这里有一些 jQuery 设置可以帮助您入门。 View it on JSFiddle.
javascript
$(window).resize(function(){
winWidth = $(window).width();
$("#resize").height(winWidth*.3);
});
关于javascript - 如何动态地将高度添加到包含响应图像的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15207922/