How to realize Adaptive Square by css

This article will explain in detail how to achieve an adaptive square in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Css to achieve adaptive square methods: 1, to the element added "width: width value%;" style, so that the width of the square element adaptive; 2, to the element added "height: width value vw;" style, so that the height of the square element can be adaptive.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Because the height is not fixed, you cannot use the height value directly. Therefore, the conversion idea uses the width value to realize the height assignment of the square. So in theory, as long as you can apply the width attribute to the height attribute.

So we can use vw units, one vw is equal to 1% of the page width, for example, the page width is 1000px, then 1vw is 10px.

Examples are as follows:

Document .placeholder {width: 50%; height: 50vW; background:green;}

Output result:

This is the end of the article on "how to achieve adaptive square in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.