An example of how to implement an adaptive square using CSS

The traditional method is to write a square in a fixed form. Directly write the length = width and write the fixed value as follows

.box{
		width: 200px;
		height: 200px;
		background: pink;
		color: #666;
	}

However, in many cases, in mobile design, the width of the image changes with different mobile devices. At this time, an adaptive square is needed.

Here are two relatively simple implementation methods:

Method 1: CSS3 vw unit, vw is relative to the width of the viewport. The viewport is divided into 100-unit vw units. 1vw = 1% viewport width

.box{
		width: 20%; //width:20vw is also OK height: 20vw;
		background: pink;
	}

Method 2: Set the padding-bottom style of the box so that the padding-bottom of the box is the same as the width of the box, and set height = 0px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
	</head>
	<style>
                *{
            	    margin: 0;
	            padding: 0;
                }
		.box{
			width: 20%;
			/* Set the height to 0 to prevent the box from being stretched to excess height by the content*/
			height: 0px;
			/* Expand the height of the box.
			   Set the same fixed width or percentage as width.
			   The percentage is relative to the width of the parent element box*/
			padding-bottom: 20%;
			background: pink;
			color: #666;
		}
	</style>
	<body>
		<div class="box">	
	            <p>&nbsp;This is a self-adapting square</p>
		</div>	
	</body>
</html>

It should be noted that if height: 0px is not written here; when there is content in the box, the box will be expanded by the content

What will happen if padding-bottom is changed to padding-top?

It can be seen that when there is content in the square, the content will be displayed outside the square. This is because the default text is arranged from left to right and from top to bottom, so after padding-top, the text will be outside the square. Therefore, padding-bottom and padding-top here cannot be mixed.

In addition, because the box is set to height : 0px; when there are child elements in the element, the height cannot be set normally. So we need to use position: absolute;使當前內容脫離文檔流,那么內容的高度百分比參照的就是父級的寬度

*{
	margin: 0;
	padding: 0;
}
.box{
	width: 20%;
	/* Set the height to 0 to prevent the box from being stretched to excess height by the content*/
	height: 0px;
	/* Expand the height of the box.
	   Set the same fixed width or percentage as width.
	   The percentage is relative to the width of the parent element box*/
	padding-bottom: 20%;
	background: pink;
	color: #666;
	position: relative;
	overflow: hidden;
}
p{
	position: absolute;
	width: 100%;
	height: 100%;
	background: yellow;
}

This way the contents of the box fill up the square.

This concludes this article about how to implement an adaptive square with CSS. For more information about CSS adaptive squares, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Nodejs-cluster module knowledge points summary and example usage

>>: Summary of seven MySQL JOIN types