創建響應式圖片庫

我是新來的網頁設計，並正在爲我的作品建立一個網站。我堅持如何正確構建這個照片庫並將其定位在我需要的地方。畫廊必須完美定位，因爲它需要與充當畫廊圖像框架的背景圖像對齊。我已經設計了這個基於％的嘗試，以最終使它響應四種不同的屏幕尺寸範圍。當我測試到目前爲止的情況時，它會在碰到不同的瀏覽器時崩潰。它在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 - 其他三個樣式表是媒體的質疑，我沒有建成。

@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 Large Screens*/ 



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

CSS媒體查詢文件保存「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媒體查詢文件「小型」畫面

@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此請 – 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，我會盡力實施。 –

創建響應式圖片庫

回答

相關問題