Detailed examples of using pure CSS to implement adaptive squares

When working on a mobile page, we sometimes need to make the banner diagram a wide square with the screen to get the best experience, like the Flipbord mobile page:

So how do you use pure CSS to make a square that is adaptive to size?

Scenario One: CSS3 VW units

A new set of length units in CSS3 relative to the percentage of the viewable area vw, vh, vmin, vmax . Where VW is the unit relative to the viewport width percentage, 1vw = 1% viewport width vh is the unit relative to the viewport height percentage, and is the percentage unit of the 1vh = 1% viewport height vmin smaller one relative to the current viewport width high school, and the same as the percentage unit that is larger than the current viewport width high school. The Unit browser compatibility is as follows:

With VW units, we can easily make adaptive squares:

<p class= "placeholder" ></p>  . Placeholder {  width:100%;  HEIGHT:100VW;}

Achieve results

Advantages: Simple and convenient
Cons: Browser compatibility is not good

Scenario Two: Setting the vertical padding open container

In the CSS box model, a relatively easy to ignore is margin, padding the percentage of the numerical calculation. As a rule, margin, padding the percentage value is calculated relative to the width of the parent element . This allows you to create an adaptive square by simply setting a value in the vertical direction of the element padding to the width same percentage as:

. placeholder {  width:100%;  padding-bottom:100%;}

Achieve results

When everything looks normal, we try to add content to the container:

Hey? How did the height spill over? Let's look at this box model:

The content area occupies a height of 38px, as shown in. To solve this problem, we can set the container height to 0:

. placeholder {  height:0;}

This scheme is concise and well-compatible, but in addition to the problem of filling content, there may be max-height no contraction: DEMO, so the third scenario comes:

Scenario three: Using the pseudo-element margin (padding)-top to open the container

In scenario two, we use the attribute of the percent value to open up the padding-bottom container's interior space, but doing so causes the properties set on the element to max-height fail:

The reason for this failure is that the Max-height attribute is restricted to height only, that is, it only works on elements content height . So are we able to use a sub-element to open content up the height of the part, so that the max-height property takes effect? Let's try it out:

. placeholder {  width:100%;}. Placeholder:after {  content: ';  Display:block;  margin-top:100%; /* Margin percentage is calculated relative to parent element width */}

A refresh page, huh? Why is there nothing?

This involves the concept of the margin collapse, because the container and the pseudo element in the vertical direction of the outer margin collapse, so we imagine the height of the open parent element does not appear. And the way to deal with this is 在父元素上触发 BFC :

. placeholder {  Overflow:hidden;}

Note: If you use the open parent element in the vertical direction padding , you do not need to trigger the BFC
Achieve results

OK, the parent element is propped up, let's try setting Max-height:

Perfect! What the? Do you mean the height overflows when you add content inside an element? Somebody, pull this traitor out and feed the dog! In this case, the content can be placed in a separate content block, using absolute positioning to eliminate space consumption.

Conclusion