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:;
right:;
top:;
bottom:;
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
.picture-area {
width: 250px;
height: 300px;
margin: 1em auto 1em auto;
position: relative;
}
.picture-area .picture {
position: absolute;
left:;
top:;
right:;
bottom:;
background-repeat: no-repeat;
background-position: center 36%;
background-size: cover;
}
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