전체 화면 배경 이미지 (일종의) - 자르지 않고?

Question

내 클라이언트는 실제로 불가능할 수있는 것을 원합니다. 즉, 자르지 않고 크기를 유지하는 전체 화면 배경 이미지를 원합니다. 그들은 공백을 받아 들일 용의가 있지만, 어떤 축에서도 잘리지 않으면 서 화면을 채우기를 원합니다. 진정한 전체 페이지 배경을 만드는 멋진 스크립트를 찾을 수 있었지만 이미지를 자르지 않아도됩니다. 어떤 아이디어?

Answer 1

이것은 불가능하지 않습니다! 당신은 완전히 이것을 할 수 있습니다. JQuery를 사용하여 브라우저 뷰포트와 높이의 높이와 너비를 찾습니다! 배경 이미지를 해당 크기로 설정하십시오. 애스펙트를 유지해야하는 경우 너비/높이에 대해 JQuery 알고리즘을 사용하고 실제 크기의 비율에 대해 벤치마킹하기 위해 해당 비율을 사용하고 높거나 낮 으면 배경 이미지의 높이/너비를 100 %로 설정하고 다른 크기 실제 비율이 어떤 것으로 계산 되든 상관 없습니다.

클라이언트가 스크롤 막대를 염려하지 않으면 세 번째 시도에서이 가이드를 따르십시오. http://css-tricks.com/766-how-to-resizeable-background-image/ 그리고 html/body 요소의 최소 높이를 배경의 너비에 따라 달라 지도록 설정하십시오 영상. 이 모든 것이 여러분이해야 할 일에 대한 아이디어를 얻는 데 도움이되기를 바랍니다.

Answer 2

HTML :

<img id="bg" src="whateves.jpg"/> 

당신이 JQuery와 사용 CSS를

#bg { display:block; margin:auto; } 

에 이미지의 중심을 할 수 있습니다 :

$(window).load(function(){ 
     var windowRezize = function() { 
      var windowHeight = $(window).height(), 
       bg = $('#bg'), 
       bgHeight = bg.height(); 

      console.log(windowHeight); 
      console.log (bgHeight); 
      bg.height($(window).height()); 
      bg.css('opacity', '1'); 
     }; 
     windowRezize(); 
     $(window).resize(function(){ 
      console.log('resized'); 
      windowRezize(); 
     }) 

    });