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