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

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

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

Answer 1

离散身高切换效果

CSS Media queries将允许你设定在高度变化离散宽度。

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

对于这些工作（如果你不熟悉他们）如何调整CSS技巧网页浏览器上的一个例子（见上面的链接）。达到一定宽度后，您会看到布局更改。媒体查询正在进行中。

连续高度转换

对于连续的高度转换，您需要转向Javascript。这里有一个小小的jQuery设置，可以帮助你开始。 View it on JSFiddle.

的JavaScript

$(window).resize(function(){ 
    winWidth = $(window).width(); 
    $("#resize").height(winWidth*.3); 
});