영웅 섹션을 항상 브라우저 창을 채우는 방법?

Question

Goodevening guys,

브라우저보기 영역에 영웅 이미지를 채울 수 있는지 궁금합니다. 영웅 섹션의 높이가 항상 뷰포트의 높이가되도록합니다.

나는 다음과 같은 코드 조각을 함께했다, 그러나 그것은 작동하지 않습니다 :

function resizer() { 
    var fulls = $('#hero'); 
    console.log(fulls); 
    var win = $(window); 

    resize.on(function() { 
    fulls.height(win.height()); 
    }); 
}; 

감사합니다. 캐스퍼

Answer 1

한번에 사용하기 :

$(window).resize(function() { 
    $('#hero').height($(window).height()); 
}).resize(); 

Answer 2

을 간단하게, 뷰포트의 폭과 높이를 사용

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

:

fulls.style.height = "100vh"; //which means 100% of the viewport height, same works for width 

그것은 좋은 생각 일 것이다 뷰포트 메타 태그를 설정하는

Answer 3

이 코드를 사용해보십시오. http://jsfiddle.net/F7AN5/2/

HTML :

<div id="hero"> 
     <img src="http://www.thememorist.com/wp-content/uploads/2012/03/superhero-blank1.jpg" alt=""/> 
</div> 

CSS :

body{ 
    padding:0; 
    margin:0; 
} 
img{ 
    display:block; 
} 

jQuery를 그것은 일하고

$(document).ready(function(){ 
var resizeHero = function() 
    { 
     var hero = $("#hero"), window1 = $(window); 
     hero.css({ 
      "width": window1.width(), 
      "height": window1.height() 
     }); 

     if(window1.width() < window1.height()) 
     { 
      hero.find("img").css({ 
      "width": window1.width(), 
      "height": "auto" 
      });   
     } 
     else 
     { 
      hero.find("img").css({ 
      "height": window1.height(), 
      "width": "auto" 
      });    
     } 
    }; 

    resizeHero(); 

    $(window).resize(function(){ 
     resizeHero();  
    }); 
});