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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.