반응 이미지를 포함하는 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 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> 

동적으로 높이를 추가하는 방법이 있나요 0

중요한지는 모르겠지만 최대 이미지 크기 : 531px 너비 x 400px 높이입니다.

Answer 1

이산 신장은 높이가 변경되는 별개의 폭을 설정할 수있는 것

CSS Media queries 전환. 이 작품은 (당신이 그들에 익숙하지 경우) CSS 트릭 웹 사이트에서 브라우저의 크기를 조정하는 방법의 예를 들어

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

(위의 링크를 참조). 특정 너비에 도달하면 레이아웃이 변경됩니다. 그것이 작동중인 미디어 쿼리입니다.

연속 높이 연속 높이의 전환을 위해

을 전환, 당신은 자바 스크립트로 설정해야합니다. 시작하는 데 도움이되는 작은 jQuery 설정이 있습니다. View it on JSFiddle.

자바 스크립트

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