반응 형 포토 갤러리 만들기

나는 웹 디자인을 처음하고 자신의 작품을위한 사이트를 건축하고 있습니다. 나는이 사진 갤러리를 올바르게 만드는 방법과 함께 붙어 있고, 내가 필요로하는 곳에 배치했다. 갤러리 이미지는 갤러리 이미지의 프레임 역할을하는 배경 이미지와 일렬로 있어야하므로 갤러리를 완벽하게 배치해야합니다. 필자는 이것을 %에 기반하여 4 가지 화면 크기 범위에 반응하도록 설계했습니다. 지금까지 내가 가지고있는 것을 테스트 할 때 다른 브라우저에 부딪혔을 때 그냥 붕괴됩니다. Dreamweaver의 라이브 뷰에서는 문제가 없지만 브라우저에서 테스트 할 때 배경 이미지가 표시되지 않거나 이미지가 페이지의 왼쪽에 쌓여 화면이 축소 될 때 전혀 응답하지 않습니다. . 내가 가진 세 가지 주요 질문은 다음과 같습니다. - 배경 이미지를 표시하고 갤러리 이미지를 제 위치에 유지하려면 어떻게합니까? 그리고 화면 크기가 변경 될 때 다른 CSS 파일을 활성화하려면 어떻게합니까? 그러나 모든 도움은 대단히 감사하겠습니다. 여기 콜린반응 형 포토 갤러리 만들기

다음은 HTML

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 /> 
<title>Test</title> 


<link rel"stylsheet" type="text/css" media="only screen and (min-width:769px;) and (max-width:1088px;)" href="../_css/large.css" /> 

<link rel"stylsheet" type="text/css" media="only screen and (min-width:449px;) and (max-width:768px;)" href="../_css/medium.css" /> 

<link rel"stylsheet" type="text/css" media="only screen and (min-width:252px;) and (max-width:448px;)" href="../_css/small.css" /> 

<link href="../_css/main_full.css" rel="stylesheet" type="text/css"> 


</head> 

<body> 

<div class="page_container"> 

     <div class="gallery_container"> 

       <a href="#"><img id="pos1" src="../_images/galleryimages_full/sunlight_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos2" src="../_images/galleryimages_full/clownflat_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos3" src="../_images/galleryimages_full/goldensun_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos4" src="../_images/galleryimages_full/monstertheatre_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos5" src="../_images/galleryimages_full/home_smallvector.jpg" width="250" height="194" alt="© C.M.B"></a> 
       <a href="#"><img id="pos6" src="../_images/galleryimages_full/wishingstargallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos7" src="../_images/galleryimages_full/cozycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos8" src="../_images/galleryimages_full/coffeetable_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos9" src="../_images/galleryimages_full/breakaway_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos10" src="../_images/galleryimages_full/happyns_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos11" src="../_images/galleryimages_full/boymeetsgirl_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos12" src="../_images/galleryimages_full/sadbabygallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos13" src="../_images/galleryimages_full/salvation_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos14" src="../_images/galleryimages_full/orangestart_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos15" src="../_images/galleryimages_full/spaceobjectsgallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos16" src="../_images/galleryimages_full/clown_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos17" src="../_images/galleryimages_full/ponycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos18" src="../_images/galleryimages_full/pacha_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos19" src="../_images/galleryimages_full/goldstorm_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos20" src="../_images/galleryimages_full/qerogallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 
       <a href="#"><img id="pos21" src="../_images/galleryimages_full/theblues_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a> 

     </div> 

</div> 


</body> 
</html>

메인 CSS입니다 - 다른 세 개의 스타일 시트는 아직 내장하지 않은 미디어 쿼리 내용입니다. "SMALL"화면

을위한 "MEDIUM"화면

@charset "UTF-8"; 
/* CSS Document */ 
/* Layout Medium Screens */ 

.page_container { 
width: 768px; 
height: 1800px; 
margin: 0% auto 0% auto; 
background-image: url(../_page_components/gallery/gallery_medium.jpg); 
}

CSS 미디어 쿼리 파일에 대한 "LARGE"화면

@charset "UTF-8"; 
/* CSS Document */ 
/* Layout Large Screens*/ 



.page_container { 
width: 1088px; 
height: 2550px; 
margin: 0% auto 0% auto; 
background-image: url(../_page_components/gallery/gallery_large.jpg); 
}

CSS 미디어 쿼리 파일에 대한

@charset "UTF-8"; 
/* CSS Document */ 

/* Layout (global rules for fullsize) */ 

.page_container { 
width: 1280px; 
height: 3000px; 
background-image: url(../_page_components/gallery/gallery_full.jpg); 
margin: 0% auto 0% auto; 
position: relative; 
/*padding-top: 19.541%; 248 pixels*/ 
} 

.gallery_container { 
width: 66.7%; /* 853 pixels */ 
height: 55.3%; /* 1659 pixels */ 
/*margin: 19.541% auto 0% auto; - equal to 248px*/ 
padding: 19.4% 0% 0% 0%; 
margin: 0% auto 0% auto; 
} 

#pos1 { /* Top Left Corner*/ 
padding-left: 0.3%; 
padding-right: 4.91%; 
padding-bottom: 5.3%; 
} 

#pos2 { /* Middle top row */ 
padding-left: 0.42%;  
padding-bottom: 5.3%; 
} 

#pos3 { /* Topr Right Corner */ 
padding-left: 5.35%; 
padding-bottom: 5.3%; 
} 

#pos4 { /* The rest of the images/rows follow the same positioning pattern */ 
padding-left: 0.4%; 
padding-right: 4.75%; 
padding-bottom: 5.3%; 
} 

#pos5 { 
padding-left: 0.5%; 
padding-bottom: 5.3%; 
} 

#pos6 { 
padding-left: 5.15%; 
padding-bottom: 5.3%; 
padding-right: 0.2%; 
} 

#pos7 { 
padding-left: 0.5%; 
padding-right: 4.55%; 
padding-bottom: 5.3%; 
} 

#pos8 { 
padding-left: 0.5%; 
padding-bottom: 5.3%; 
} 

#pos9 { 
padding-left: 5.25%; 
padding-bottom: 5.3%; 
} 

#pos10 { 
padding-left: 0.5%; 
padding-right: 4.55%; 
padding-bottom: 5.3%; 
} 

#pos11 { 
padding-left: 0.5%; 
padding-bottom: 5.3%; 
} 

#pos12 { 
padding-left: 5.25%; 
padding-bottom: 5.3%; 
} 

#pos13 { 
padding-left: 0.5%; 
padding-right: 4.55%; 
padding-bottom: 5.4%; 
} 

#pos14 { 
padding-left: 0.5%; 
padding-bottom: 5.4%; 
} 

#pos15 { 
padding-left: 5.25%; 
padding-bottom: 5.4%; 
} 

#pos16 { 
padding-left: 0.5%; 
padding-right: 4.55%; 
padding-bottom: 5.6%; 
} 

#pos17 { 
padding-left: 0.5%; 
padding-bottom: 5.6%; 
} 

#pos18 { 
padding-left: 5.25%; 
padding-bottom: 5.6%; 
} 

#pos19 { 
padding-left: 0.5%; 
padding-right: 4.55%; 

} 

#pos20 { 
padding-left: 0.5%; 

} 

#pos21 { 
padding-left: 5.25%; 

}

CSS 미디어 쿼리 파일

@charset "UTF-8"; 
/* CSS Document */ 
/* Layout Small Screens */ 

.page_container { 
width: 448px; 
height: 1050px; 
margin: 0% auto 0% auto; 
background-image: url(../_page_components/gallery/gallery_small.jpg); 
}

출처

2012-12-04 colin barclay

jsfiddle this please – twodayslate

안녕하세요 twodayslate, jsfiddle 프로필을 설정하고이 코드를 연결했습니다. http://jsfiddle.net/squigworm/FrsGp/3/에서 찾을 수 있습니다. 이 문제를 조사해 주셔서 감사합니다. –

나는이 결과를 볼 수 있도록 [www.colinbarclay.com] (http://www.colinbarclay.com)에이 코드를 올려 놓았다. 이제 나는 아무도 jsfiddle에서 볼 수 없음을 깨닫습니다. –

<div id="bgpic"> 
    <img src="../_page_components/gallery/gallery_full.jpg" width="100%" height="100%" /> 
</div 

<div class="page_container"> 
</div> 

#bgpic { 
position:fixed; 
width:100%; 
height:100%; 
} 

#bgpic img { 
width:100%; 
height:100%; 
}

출처

2012-12-04 05:25:02

Carol에게 대답 해 주셔서 감사합니다. 구현하려고합니다. –

반응 형 포토 갤러리 만들기

답변

관련 문제