离散高度过渡

Question

我在响应容器中放置了一个简单的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">

我不知道是否重要，但最大图像尺寸是：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);
});

如何动态地向包含响应图像的div添加高度

1 个答案:

离散高度过渡

连续高度过渡