폭의 이미지면 div의 100 %와 반응 형 웹 사이트의 높이 수정

Question

저는 ASP.NET MVC 웹 사이트에서 작업하고 있습니다. (I 이미지를 슬라이드 필요) (네비게이션 바는)

• 헤더 DIV
• 이미지 슬라이더 DIV
(내용 본체)
• 바디 사업부 : 방문 페이지 4 명 div의에 슬릿
• 꼬리말 div

이제 이미지 슬라이더 div의 너비와 높이가로드 또는 크기 조정 시간에 계산되고 전체 화면을 포함하도록 조정됩니다.

jQuery를 뷰포트의 100 % 블록 높이와 너비를 조정하려면

$(window).bind('load resize', function() { 

     $("#nivo-slider").nivoSlider(); 

     var viewport_height = $(window).height(); 

     var viewport_width = $(window).width(); 

     var bodyTopPadding = $("body").css('padding-top').replace(/[^-\d\.]/g, ''); 

     $("#BannerImageSlider").css("height", (viewport_height - bodyTopPadding)+ "px"); 

    }); 

이미지 슬라이더 DIV을 :

<div id="BannerImageSlider"> 
     <div class="slider-wrapper theme-default"> 
      <div id="nivo-slider" class="nivoSlider" style="width: 100%"> 
       <img src="~/Graphics/Images/slider1.jpg" alt="" /> 
       <img src="~/Graphics/Images/slider2.jpg" alt="" /> 
       <img src="~/Graphics/Images/slider3.jpg" alt="" /> 
      </div> 
     </div>   
    </div> 

내 문제는 상 높이이다. Nivo 슬라이더 플러그인을 사용하면서 너비를 관리 할 수 ​​있지만 화면 크기에 따라 높이가 작아 지거나 작아집니다. 나는 1400 X 900 해상도로 이미지 작업을하고있다.

나는 다음과 같이합니다 : http://www.coffeecreamthemes.com/themes/jobseek/demo2/

내가 슬라이더 혁명을 구입하지만,이 워드 프레스를위한 것입니다. 두 번째로 download bundle에서 관련된 jQuery 및 CSS 파일을 찾을 수 없습니다.

해결 방법이 필요합니다.이 동작을 수행하는 방법을 잘 모르겠습니다.

Answer 1

이 CSS는 당신을 위해 그것을해야한다)

#BannerImageSlider { 
    position: relative; 
} 
#BannerImageSlider .slider-wrapper { 
    position: absolute; 
    top: -999px; 
    bottom: -999px; 
    left: -999px; 
    right: -999px; 
    max-width: 155.56vh; 
    max-height: 100vh; 
    margin: auto; 
} 

이 슬라이더를 완전히 사용할 수있는 지역을 커버 보여줄 것입니다. :-)