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
Details of the order in which MySQL reads my.cnf
Table of contents The order in which MySQL reads ...
Detailed explanation of the redirection configuration and practice of Rewrite in Nginx
1: Understand the meaning of address rewriting an...
The whole process of upgrading Angular single project to multiple projects
Table of contents Preface Development Environment...
WeChat applet calculator example
WeChat applet calculator example, for your refere...
Javascript destructuring assignment details
Table of contents 1. Array deconstruction 2. Obje...
Example analysis of mysql stored procedures that trigger error conditions in stored procedures (SIGNAL and RESIGNAL statements)
This article uses examples to illustrate the erro...
Deploy grafana+prometheus configuration using docker
docker-compose-monitor.yml version: '2' n...
An article to help you learn more about JavaScript arrays
Table of contents 1. The role of array: 2. Defini...
Detailed explanation of sample code for the improvement and changes brought by CSS variables to JS interactive component development
1. Qualitative changes brought by CSS variables T...
Docker setting windows storage path operation
When installing Docker on Windows 10, after selec...
React useMemo and useCallback usage scenarios
Table of contents useMemo useCallback useMemo We ...
Troubleshooting the security group ports added by Alibaba Cloud and the inability to access them after adding them
Purpose: 1. In order to map the server's exte...
Docker and Docker-compose one-click installation tutorial (supports online and offline)
Shell Script #!/bin/sh # Current directory CURREN...
How to implement gzip compression in nginx to improve website speed
Table of contents Why use gzip compression? nginx...
TypeScript union types, intersection types and type guards
Table of contents 1. Union Type 2. Crossover Type...