创建响应式图片库

我是新来的网页设计，并正在为我的作品建立一个网站。我坚持如何正确构建这个照片库并将其定位在我需要的地方。画廊必须完美定位，因为它需要与充当画廊图像框架的背景图像对齐。我已经设计了这个基于％的尝试，以最终使它响应四种不同的屏幕尺寸范围。当我测试到目前为止的情况时，它会在碰到不同的浏览器时崩溃。它在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，我会尽力实施。 –

创建响应式图片库

回答

相关问题