如何動態添加高度包含響應圖像的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); 
});