创建响应式照片库

时间：2012-12-04 03:23:24

标签： css background-image responsive-design photo-gallery

我是网页设计的新手，正在为我的艺术作品建立一个网站。我坚持如何正确地构建这个照片库，并将它放在我需要它的位置。画廊必须完美定位，因为它需要与作为画廊图像框架的背景图像对齐。我已经设计了这个基于％的尝试，最终使它能够响应四种不同的屏幕尺寸范围。当我测试我到目前为止所遇到的内容时，它会在遇到不同的浏览器时崩溃。它在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媒体查询文件

@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);
}

1 个答案:

答案 0 :(得分：0)

<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%;
}
相关问题
最新问题