FE:CSS fixed image display size and GitHub pages online demo

CSS fixed image display size analysis

Assuming the size of the picture area is fixed to 250x300px, then we can write the following style

{    width: 250px;     height: 300px;     margin: 1em;}

Of course, the following HTML is not limited to the size of the image

<class= "Picture-area">    <src  alt= "..."></div>

Change your mind and take the picture as a div background image

<styleurl (' ... ') "></div>

The div needs to be covered with picture-area, so define the style

{    position: absolute;     Left:0;     Right:0;     top:0;     Bottom:0;     background-repeat: no-repeat;     background-position: Center;     background-size: cover;}

So get the limit image size Div as follows

<class= "Picture-area">    <class  styleurl (' ... ') "></div>  </div>

Since the picture uses absolute positioning, according to the interpretation on W3school: "Generates an absolutely positioned element relative to the first parent element other than the static location", if the element does not have a position defined, the default position is static, Therefore, the picture-area of the parent element is set to position:relative.

The full CSS

1 . Picture-area{2 3 width:250px;4 5 Height:300px;6 7 margin:1em Auto 1em auto;8 9 position:relative;Ten  One} A  -  -  the  - . Picture-area. picture{ -  - position:Absolute; +  -  Left:0; +  A Top:0; at  -  Right:0; -  - Bottom:0; -  - background-repeat:no-repeat; in  - background-position:Center 36%; to  + background-size:cover; -  the}

View Code

GitHub Pages

Each github repository has GitHub pages and can be used for static page demonstrations using GitHub pages.

So first create a repository named Vacationschedule on GitHub.

(1) Clone project to Local

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

(2) Enter the project folder

CD Vacationschedule

(3) Switch to Ph-pages branch, the file of this branch is considered as a file of GitHub pages

git checkout--orphan ph-pages

(4) Write the Web code under the project folder. Directory structure such as:

/vacationschedule /bootstrap /CSS /images index.html

(5) Submit code

Git commit-a

(6) Merge to Ph-pages

git push

can see the Web page effect through http://zrss.github.io/VacationSchedule/; In general, GitHub pages can be http://<user_name>.github.com/ <repository_name>/to visit.

Style reference: http://xiumi.us

GitHub pages Reference: http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

FE:CSS fixed image display size and GitHub pages online demo