How to use CSS to maintain the aspect ratio of page content

Source: Internet
Author: User
This article mainly describes how to use CSS to maintain page content aspect ratio of the method, the author of the Pseudo-element and the VW unit and other different methods under the example, the need for friends can refer to the next

Requirement Description: The mobile implementation spans the half-circle of the page. (similar to the problem, implement a 4x4 square grid)

Simplifying the problem, we can understand it to achieve a block with a height and width ratio of 1:2.

Need to solve the problem:

1, height and width according to a certain proportion.

2, outer container height and width are uncertain.

3, try not to use pictures and scripts instead.

4, compatible with mobile side.

Writing HTML

<p class = "semicircle" ></p>

Think of one, use height:100%,

body{       margin:0;       width:100%;       Background:lightblue;   }   . semicircle {       width:100%;       height:100%;       border-top:5px solid #fff;       border-radius:100%;   }

There is a problem, and the percentage of height is calculated based on the parent container, not the current container, and does not meet our needs at all. The effect is as follows:

The height percentage of the parent container body is associated with the height of its child container, even if the body height is set to 100%, the parent container cannot be "fully stretched" because the actual height of the child container, semicircle, is 5 of the boundary. Therefore, you cannot specify a percentage of a container by setting the height of the parent container as a percent.

Think two, set padding-top or Padding-bottom to 100%
The percentage is calculated with respect to the width of the generated box ' s containing block [...] (source:w3.org, emphasis mine)

The calculation of the percent width is related to the width of the containing block of the generated box. The percentage of Padding-top, Padding-bottom, is calculated based on the width of the parent container, not the height. Other Scale Realization Table

aspect ratio Padding-bottom Value
16:9 56.25%
4:3 75%
3:2 66.66%
8:5 62.5%
body{       margin:0;       width:100%;       Background:lightblue;   }   . semicircle {       width:100%;       height:0;       padding-bottom:100%;       border-top:5px solid #fff;       border-radius:100%;   }

Thinking three, using the VW unit
Using the VW unit to set the element height and width, the size of the VM is set by the width of the viewport, so you can keep the container displayed at a certain scale by this method. A unit of VW equals 1% viewport width, or 100vw equals 100%viewport width.

body{       margin:0;       width:100%;       Background:lightblue;   }   . semicircle {        width:100vw;         HEIGHT:100VW;       border-top:5px solid #fff;       border-radius:100%;   }

Table

by
aspect ratio Multiply width
1:1 1
1:3 3
4:3 0.75
16:9 0.5625

Thinking four, using pseudo-elements and inline-block layouts

body {       width:100%;       font-size:0;       Text-align:center;       Background:lightblue;   }   . semicircle {       border-top:5px solid #fff;       border-radius:100%;   }   . Semicircle:before {       content: "";       Display:inline-block;       padding-bottom:100%;   }

Although the code is a bit complex, it is flexible and can achieve more similar effects.

When the requirement is changed to achieve a semicircle that spans the width of the screen 80%, we only need to add the attribute width:80% to the. semicircle and, by the way, the container is centered.

The principle of this method is clear:

Reference thinking one, cannot extend the outer container height through the height 100%, then can through the pseudo-element, inserts a height and the width consistent element, the container opens up to 1:1 height the container. Note that this method is semi-circular and requires a container with a width height of 1:1, which is twice times the space occupied by the above method.

Setting: Before element boundary, parsing principle:

Think five, use pictures, compatible with low-grade mobile devices.

. semicircler img {     width:100%;     Background-repeat:no-repeat;     background-size:100% 100%;     Background-image:url (.. /img/autoresized-picture.jpg);   }

Using scripts, CSS is more concise and clear, and the goal is clearer.

p.style.height=p.offsetwidth+ "px";

For implementing a 2*2 square grid

*------Main code-------*/body {width:100%;             margin:0;           Text-align:center;             } p{Display:inline-block;             width:50%;             Background:lightblue;             font-size:12px;             position:relative;           Vertical-align:middle;               } p:before {content: "";               Display:inline-block;               padding-bottom:100%;           Vertical-align:middle;           }/*------other code-------*/P:nth-child (2), P:nth-child (3) {background:pink;               } span {display:inline-block;               Vertical-align:middle;               Font-size:6em;           Color: #fff; }
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.