100 % 너비의 이미지로 그리드 기반 웹 사이트를 만드는 방법은 무엇입니까?

Question

전체 브라우저를 채우는 "랜딩"이미지로 1140 그리드 시스템을 기반으로 웹 사이트를 만들고 싶습니다. 따라서 콘텐츠를 스크롤해야합니다. 기본적으로 열면 기본적으로이 이미지 (아무런 제한없이 브라우저의 100 %를 채우는 높이와 너비로 표시됨)를 스크롤하면 페이지의 나머지 부분을 볼 수 있습니다. 열. "착륙"이미지를 확장 가능하게 만들고 싶지는 않습니다. 스마트 폰이나 태블릿 위젯에도 적합합니다.

Answer 1

this과 같은 것을 찾는 것처럼 들립니다. 아주 기본적인 레이아웃이지만, 바이올린에서 아이디어를 얻을 수 있어야합니다.

기본적으로 너비와 높이가 100 % 인 <div>을 만듭니다. 브라우저 크기에 관계없이 다른 블록 요소를 추가하여 다른 콘텐츠를 저장할 수 있습니다.

<div style="height:100%;width:100%;"> 
    <img src="http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg" 
       style="height:100%;width:100%;"/> 
</div> 
<div> 

    here is some other stuff</br> 
    here is some other stuff</br>  

</div>​