0

我在响应式容器中放置了一个简单的 jquery 图像滑块。滑块以响应方式工作，但高度以像素为单位设置，在其最大视口宽度下看起来不错，但正如您可以想象的那样，在较小的视口宽度下滑块和内容之间的距离太大。

我想知道是否有一种简单的方法使用 CSS 或 jQuery 来动态设置包含图像滑块的 div 的高度，以便它看起来适合所有视口宽度。

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

我不知道这是否重要，但最大图像尺寸是：531px 宽 x 400px 高。

4

1 回答 1

4

离散高度过渡

CSS媒体查询将允许您设置高度变化的离散宽度。

@media (max-width: 979px) and (min-width: 768px) {
  #slideshow {
    height: whatever;
  }
}

有关这些如何工作的示例（如果您不熟悉它们），请在 CSS Tricks 网站上调整您的浏览器大小（请参阅上面的链接）。当您达到特定宽度时，您会看到布局发生变化。这就是实际的媒体查询。

连续高度过渡

对于连续的高度转换，您需要使用 Javascript。这是一个小 jQuery 设置，可能会帮助您入门。在 JSFiddle 上查看。

javascript

$(window).resize(function(){
  winWidth = $(window).width();
  $("#resize").height(winWidth*.3);
});
于 2013-03-04T18:02:57.227 回答