Example of implementing a 16:9 rectangle with adaptive width and height using CSS
|
Earlier we talked about how to make a square with an adaptive width and height of 1:1 https://www.jb51.net/css/753385.html Now let's talk about how to make an adaptive 16:9 rectangle. The first step is to calculate the height. Assuming the width is 100%, the height is h=9/16=56.25% The second step is to use the padding-bottom method mentioned above to realize the rectangle
<style>
*{
margin: 0px;
padding: 0px;
}
/* .wrap: The div that wraps the rectangle is used to control the size of the rectangle*/
.wrap{
width: 20%;
}
/* .box rectangular div, the width is 100% of .wrap, this is mainly to facilitate the calculation of height*/
.box{
width: 100%;
/*Prevent the rectangle from being stretched to excess height by the content inside*/
height: 0px;
/* 16:9 padding-bottom: 56.25%, 4:3 padding-bottom: 75% */
padding-bottom: 56.25%;
position: relative;
background: pink;
}
/* For the content inside the rectangle, you need to set position: absolute to set the content height to 100% the same as the rectangle*/
.box p{
width: 100%;
height: 100%;
position: absolute;
color: #666;
}
</style>
<body>
<div class="wrap">
<div class="box">
<p> This is a 16:9 rectangle</p>
</div>
</div>
</body>
Similar rectangles of different proportions can be achieved in this way This concludes this article about how to use CSS to implement a 16:9 rectangle with adaptive width and height. For more information about CSS adaptive width and height, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Complete list of CentOS7 firewall operation commands
Recommend
Solve the splicing problem of deleting conditions in myBatis
I just learned mybatis today and did some simple ...
The most detailed method to install docker on CentOS 8
Install Docker on CentOS 8 Official documentation...
Pure CSS to achieve a single div regular polygon transformation
In the previous article, we introduced how to use...
Without too much code, you can use hyperlinks to implement simple and beautiful custom check boxes
Today I suddenly thought that the styles of check ...
MySQL database terminal - common operation command codes
Table of contents 1. Add users 2. Change the user...
Processing ideas for decrypting WeChat applet packages on PC in node.js
Table of contents Where is the source code of the...
JS asynchronous execution principle and callback details
1. JS asynchronous execution principle We know th...
Summary of common Mysql DDL operations
Library Management Create a library create databa...
How to ensure the overall user experience
Related Articles: Website Design for User Experien...
MySQL implements a solution similar to Oracle sequence
MySQL implements Oracle-like sequences Oracle gen...
Detailed explanation of system input and output management in Linux
Management of input and output in the system 1. U...
Css3 realizes seamless scrolling and anti-shake
question The seamless scrolling of pictures and t...
Solve the problems encountered during the installation of Mysql 8.0.17 winx64 version
1. Manually create and add my.ini file # CLIENT S...
Solution to mysql error when modifying sql_mode
Table of contents A murder caused by ERR 1067 The...
How to implement digital paging effect code and steps in CSS
A considerable number of websites use digital pagi...