반응 형 디자인의 상대 위치 지정

div를 상대적으로 배치 할 때 쉽게 div를 배치하려고합니다. 그러나이 div 각각을 브라우저 크기에 맞추기를 원합니다.
내가 매우 약이 방법을 사용하여 달성했습니다반응 형 디자인의 상대 위치 지정

<div id="container"> 
<div id="test-1" style="background: url(../images/background-v2.jpg)"></div> 
<div id="test-2" style="background: url(../images/background-v2.jpg)"></div> 
</div>

CSS : 당신이 아래로 확장 할 때

#test-1 { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

#test-2 { 
    position: absolute; 
    top: 101%; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

그래서 # 시험 1 저울은 다음 브라우저의 크기에 맞게 # 테스트 - 2는 브라우저의 크기 등에도 적합합니다. 하지만 절대적으로 그 위치를 정하고 정상에서 # test-2 101 %를 설정하여이 작업을 수행했습니다. 다른 div를 추가 할 때마다 수행하고 싶지 않습니다. 브라우저 배경 이미지의 크기. 그게 가능하다면? jQuery가 필요한가요?
나는 이걸 완전히 뒤 졌어!

div 내에서 중첩되어 있으므로 브라우저의 크기가 너비가 약 750px 미만이되고 배경 이미지가 고정되면 어쨌든 할 수있는 배경 이미지가있는 것을 알아낼 수없는 뭔가가 있습니다. 기본적으로 브라우저의 중앙에 있어야하며, 기본적으로 브라우저의 왼쪽에서 이미지가 범람하고 있습니까?

출처

2013-01-22 user1374796

당신이 그들과 함께 무슨 일을하는지 정말 모르겠어요하지만 여기에 크기 조정 문제에 대한 jQuery를 사용하여 솔루션으로 나는 배경 이미지를 사용하지 않은 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 
     <style> 
      .fill-browser{ 
       width:100%; 
      } 
     </style> 
     <!-- uncomment the line below to include jquery, I had to comment it out for stackoverflow --> 
     <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script--> 
     <script> 
      $(function() { 
       Resize(); 
      }); 

      //Every resize of window 
      $(window).resize(function() { 
       Resize(); 
      }); 

      //Dynamically assign height 
      function Resize() { 
       // Handler for .ready() called. 
       var windowHeight = $(window).height() + 'px'; 
       $('.fill-browser').css('height', windowHeight); 
      } 
     </script> 
    </head> 

    <body> 
     <div class="fill-browser" style="background-color:#aa0000;"></div> 
     <div class="fill-browser" style="background-color:#00aa00;"></div> 
     <div class="fill-browser" style="background-color:#0000aa;"></div> 
    </body> 
</html>

출처

2013-01-23 00:31:22 Dean

감사합니다. 작은 질문 하나, 각 div 상단에 스크롤 앵커가있을 때 가능하다면 알 수 있습니까? 따라서 div-1은 전체 화면이되고 브라우저가 약간 아래로 스크롤하면 div-2가 상단 등에 고정됩니다. – user1374796

다음 내용을 시작해야합니다. http://stackoverflow.com/a/11033304/1253708 http://stackoverflow.com/a/1811047/1253708 - 도움말에 대한 의견은이 도움말을 참조하십시오. 그리고이 API는 매우 세련되어 있으므로 스크롤링 목표를 달성하는 데 사용할 수 있다고 생각합니다. http://cubiq.org/iscroll-4 – Dean

또한 확인 할 수 있습니다 out - http://srobbin.com/jquery-plugins/backstretch/ 배경 이미지를 쉽게 늘릴 수있는 jQuery 플러그인입니다.

출처

2013-01-23 02:16:49 awolfe76

반응 형 디자인의 상대 위치 지정

답변

관련 문제