FE: CSS固定图片显示大小及GitHub Pages在线演示

CSS固定图片显示大小

分析

假设图片区域的大小固定为250×300px，那么我们可以写出如下的样式

.picture-area {
    width: 250px;
    height: 300px;
    margin: 1em;
}

当然简单如下的html是不能限制图片大小的

<div class=“picture-area”>
    <img src=“…” alt=“…”>
</div>

换个思路，将图片作为div的背景图片

<div style=“background-image: url(‘…’)”></div>

此时需要将该div铺满picture-area，因此定义样式

.picture {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

于是得到限制图片大小的div如下

<div class=“picture-area”>
    <div class=“picture” style=“background-image: url(‘…’)”></div>
</div>

由于picture使用了绝对定位，根据w3school上的解释：“生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位”，如果元素没有定义position，默认position为static，因此将父元素picture-area的定位方式设为position：relative即可。

完整的CSS

 1 .picture-area {
 2 
 3     width: 250px;
 4 
 5     height: 300px;
 6 
 7     margin: 1em auto 1em auto;
 8 
 9     position: relative;
10 
11 }
12 
13 
14 
15 
16 .picture-area .picture {
17 
18     position: absolute;
19 
20     left: 0;
21 
22     top: 0;
23 
24     right: 0;
25 
26     bottom: 0;
27 
28     background-repeat: no-repeat;
29 
30     background-position: center 36%;
31 
32     background-size: cover;
33 
34 }
View Code

 

GitHub Pages

Github的每个repository有Github Pages，可以使用Github Pages做静态页面演示。

因此首先在Github上创建一个名为VacationSchedule的repository。

(1) clone项目到本地

git clone https://github.com/zrss/VacationSchedule.git

(2) 进入项目文件夹

cd VacationSchedule

(3) 切换到gh-pages分支，这个分支的文件才被视为Github Pages的文件

git checkout --orphan gh-pages

(4) 在项目文件夹下写web代码即可。目录结构例如：

/VacationSchedule

　　/bootstrap

　　/css

　　/images

　　index.html

(5) 提交代码

git commit -a

(6) merge到gh-pages

git push

即可通过http://zrss.github.io/VacationSchedule/查看到web页面效果；一般来说，Github Pages可以通过http://<user_name>.github.io/<repository_name>/来访问。

 

样式参考：http://xiumi.us

GitHub Pages参考：http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

 

posted @ 2015-02-04 20:18  哲人善思  阅读(1552)  评论(6)  编辑  收藏  举报