이미지 요소의 전체 화면

Question

전체 화면 이미지 개체를 갖고 싶습니다. 항상 뷰포트 크기에 맞습니다. 이미지 래퍼의 높이는 뷰포트의 높이 여야합니다. 다음 코드를 사용하여이 작업을 수행했습니다.

var hero = $('#hero'); 
var win = $(window); 

hero.height(win.height()); 

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

원하는 것은 래퍼 내부의 이미지 요소가 항상 중간에 위치한다는 것입니다. 뷰포트 크기를 축소하면 이미지 요소의 왼쪽과 오른쪽이 숨겨집니다. 나는 다음의 요지 "fullscreenr"에왔다. 나는 나를 위해 그것을 다시 만들려고했지만 작동하지 않습니다.

플러그인은 내가 부모를 선택하면 작동합니다. 저를 위해서는 "주인공"입니다. 선택기를 #hero img으로 변경하면 올바르게 작동하지 않습니다. 이미지가 늘어나서 이미지가 함께 밀려 나오고 양쪽 바깥 쪽에서 사라지지 않습니다.

/** 
* Fullscreenr - lightweight full screen background jquery plugin 
* By Jan Schneiders 
* www.nanotux.com 
* 
* Modifications by Chris Van Patten 
* http://www.vanpattenmedia.com 
* Version 1.5 
**/ 

(function($){ 

    $.fn.fullscreenr = function(options) { 
     var defaults = { width: 1280, height: 1024, elementID: this.selector }; 
     var options = $.extend({}, defaults, options); 

     $(document).ready(function() { $(options.elementID).fullscreenrResizer(options); }); 
     $(window).bind("resize", function() { $(options.elementID).fullscreenrResizer(options); }); 

     return this;   
    } 

    $.fn.fullscreenrResizer = function(options) { 
     // Set bg size 
     var ratio = options.height/options.width; 

     // Get browser window size 
     var browserwidth = $(window).width(); 
     var browserheight = $(window).height(); 

     // Scale the image 
     if ((browserheight/browserwidth) > ratio){ 
      $(this).height(browserheight); 
      $(this).width(browserheight/ratio); 
     } else { 
      $(this).width(browserwidth); 
      $(this).height(browserwidth * ratio); 
     } 

     // Center the image 
     $(this).css('left', (browserwidth - $(this).width())/2); 
     $(this).css('top', (browserheight - $(this).height())/2); 

     return this; 
    } 

})(jQuery); 

$('#hero img').fullscreenr({width: 1400, height: 800}); 

너희들이 나를 도울 수 있기를 바랍니다 :

이

는 코드입니다. 고맙습니다. 변경 사항 경우

Answer 1

코드는

$(this).css('left', (browserwidth - $(this).width())/2); 
$(this).css('top', (browserheight - $(this).height())/2); 

에

$(this).css('margin-left', (browserwidth - $(this).width())/2); 
$(this).css('margin-top', (browserheight - $(this).height())/2); 

하고

body 
{ 
    padding:0; 
    margin:0; 
    overflow:hidden; 
} 

이 공백을 제거하는 추가 잘 작동합니다. FIDDLE

편집 :

• overflow:hidden;은 그냥 여기

이 코드를 사용하는 예입니다 스크롤 없애 필요하지 않습니다에

당신의 웹 사이트의 style.css 페이지에 다음 코드가 있습니다.

img, a img { 
    max-width: 100%; 
    vertical-align: middle; 
} 

제거하면 문제가 해결 된 것으로 보입니다.

Fiddle에 웹 사이트를 다시 만들었으므로 오른쪽 스타일의 코드 img, a img에 댓글을 달았습니다. 주석 처리를 제거하고 배경이 어떻게 펼쳐지는지 확인해보십시오.