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> 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
*{
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
Recommend
MyBatis dynamic SQL comprehensive explanation
Table of contents Preface Dynamic SQL 1. Take a l...
Detailed explanation of Angular component projection
Table of contents Overview 1. Simple Example 1. U...
Docker installation rocketMQ tutorial (most detailed)
RocketMQ is a distributed, queue-based messaging ...
XHTML Getting Started Tutorial: Simple Web Page Creation
Create your first web page in one minute: Let'...
Using MySQL database in docker to achieve LAN access
1. Get the mysql image docker pull mysql:5.6 Note...
MySQL Community Server 8.0.11 installation and configuration method graphic tutorial
I recently started learning about database knowle...
MySQL 5.7.21 decompression version installation and configuration method graphic tutorial (win10)
The installation and configuration method of MySQ...
A few steps to easily build a Windows SSH server
The SSH mentioned here is called Security Shell. ...
MySQL data backup and restore sample code
1. Data backup 1. Use mysqldump command to back u...
How to customize an EventEmitter in node.js
Table of contents Preface 1. What is 2. How to us...
React uses antd's upload component to implement the file form submission function (complete code)
I have just started using react to do projects, a...
Detailed tutorial on configuring local yum source in CentOS8
The centos8 distribution is released through the ...
8 examples of using killall command to terminate processes in Linux
The Linux command line provides many commands to ...
The latest graphic tutorial of mysql 8.0.16 winx64 installation under win10
In order to download this database, it takes a lo...
Summary of special processing statements of MySQL SQL statements (must read)
1. Update the entire table. If the value of a col...