HTML 페이지가 두 개의 hlaves로 분할 됨 - JS가없는 두 개의 전체 화면 반응 링크 이미지

홈페이지를 두 개로 나누려고합니다. 페이지의 모양은 this page이어야합니다. 두 개의 이미지가 반응해야하며 양쪽에 공백이없는 전체 화면을 포함해야하며 이미지를 클릭 할 수 있어야합니다. 자바 스크립트없이 HTML과 CSS로 작성 될 수 있다면 고맙겠습니다. 내가 지금 가지고HTML 페이지가 두 개의 hlaves로 분할 됨 - JS가없는 두 개의 전체 화면 반응 링크 이미지

모든입니다

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
    <div class="body"> 
     <div id="production" class="column half"> 
     <h1>production</h1> 
     </div> 
     <div id="label" class="column last"> 
     <h1>label</h1> 
     </div> 
    </div> 
    </body> 
</html>

과 CSS 어떤 도움

.body { overflow: hidden; margin: 0; width: 100%; height: 100%;} 
.column { float: left; } 
.half { height: 100%; width: 50%; } 
.last { height: 100%; float: none; width: auto; } 
#production { background-image:url(bgprod.jpg); } 
#label { background-image:url(bglabel.jpg); }

감사합니다.

출처

2014-07-14 Jakub Sejkora

는 2 열은 100 % 신장 후 절반 위치 수득 : 절대; Z 지수 : -50; html, body {margin : 0 0 0 0; 패딩 : 0 0 0 0;} – VikingBlooded

당신은이 규칙을 가지고 있나 :'html, body {margin : 0 0 0 0; 패딩 : 0 0 0 0;}'당신의 CSS에? –

좋아, 와우, 고마워! 이제 나는 전체 화면을 가지고있다. 고마워. 그러나 이미지의 전체 높이는 어떻습니까? 제발 도와 줄 수있어? :) –

나는 당신이 사용할 수있는 것을 빠르게 스케치했습니다. 이것은 이미지가 화면 크기에 비례한다는 조건에서 요구 사항을 충족시킵니다.

HTML :

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="col-half"> 
     <img class="responsive-image" src="test.jpg" /> 
     </div> 
     <div class="col-half"> 
     <img class="responsive-image" src="test.jpg" /> 
     </div> 
    </div> 
    </body> 
</html>

그리고 CSS :

html, body { 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
} 

.container { 
    width: 100%; 
    height: 100%; 
} 

.col-half { 
    margin: 0; 
    padding: 0; 
    float: left; 
    max-width: 50%; 
    height: 100%; 
} 

.responsive-image { 
    max-height: 100%; 
    max-width: 100%; 
    height: auto; 
    width: auto; 
}

출처

2014-07-14 23:12:52

HTML 페이지가 두 개의 hlaves로 분할 됨 - JS가없는 두 개의 전체 화면 반응 링크 이미지

답변

관련 문제