javascript - 如何动态地将高度添加到包含响应图像的 div

Question

我在响应式容器中放置了一个简单的 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 像素高。

Answer 1

离散高度过渡

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