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
Nginx sample code for implementing dynamic and static separation
In combination with the scenario in this article,...
How to implement property hijacking with JavaScript defineProperty
Table of contents Preface Descriptors Detailed ex...
Example of how to create a database name with special characters in MySQL
Preface This article explains how to create a dat...
Example of making a butterfly flapping its wings with pure CSS3
Pure CSS3 makes a butterfly flapping its wings, s...
Solution to the error in compiling LVGL emulator on Linux
Table of contents 1. Error phenomenon 2. Error An...
Steps to enable TLS in Docker for secure configuration
Preface I had previously enabled Docker's 237...
Detailed implementation plan of Vue front-end exporting Excel files
Table of contents 1. Technology Selection 2. Tech...
How to use history redirection in React Router
In react-router, the jump in the component can be...
202 Free High Quality XHTML Templates (1)
Here 123WORDPRESS.COM presents the first part of ...
Tutorial on deploying jdk and tomcat on centos7 without interface
1. Install xshell6 2. Create a server connection ...
Detailed explanation of simple html and css usage
I will use three days to complete the static page...
Detailed explanation of making shooting games with CocosCreator
Table of contents Scene Setting Game Resources Tu...
Syntax alias problem based on delete in mysql
Table of contents MySQL delete syntax alias probl...
Node.js returns different data according to different request paths.
Table of contents 1. Learn to return different da...
Native JavaScript to implement random roll call table
This article example shares the specific code of ...