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
How to pass the value of the select drop-down box to the id to implement the code
The complete code is as follows : HTML code: Copy ...
How to improve MySQL Limit query performance
In MySQL database operations, we always hope to a...
How to set Nginx log printing post request parameters
【Foreword】 The SMS function of our project is to ...
Lambda expression principles and examples
Lambda Expressions Lambda expressions, also known...
Native JS to achieve directory scrolling effects
Here is a text scrolling effect implemented with ...
How to completely uninstall mysql under CentOS
This article records the complete uninstallation ...
How to limit the value range of object keys in TypeScript
When we use TypeScript, we want to use the type s...
JS operation object array to achieve add, delete, modify and query example code
1. Introduction Recently, I helped a friend to ma...
Detailed explanation of using Docker to build externally accessible MySQL
Install MySQL 8.0 docker run -p 63306:3306 -e MYS...
Mobile browser Viewport parameters (web front-end design)
Mobile browsers place web pages in a virtual "...
Method of building docker private warehouse based on Harbor
Table of contents 1. Introduction to Harbor 1. Ha...
Some tips on website design
In fact, we have been hearing a lot about web des...
How to view and close background running programs in Linux
1. Run the .sh file You can run it directly using...
MySQL 8.0.15 installation and configuration method graphic tutorial under Windows
This article shares with you the graphic tutorial...
How to handle the failure of inserting rare characters in MySQL (Incorrect string value)
Recently, the business side reported that some us...