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
Example of deploying Laravel application with Docker
The PHP base image used in this article is: php:7...
Perfect solution to the problem of connection failure after MySQL client authorization
Deploy the MySQL environment locally (192.168.1.1...
Windows 10 + mysql 8.0.11 zip installation tutorial detailed
Prepare: MySQL 8.0 Windows zip package download a...
Nodejs Exploration: In-depth understanding of the principle of single-threaded high concurrency
Table of contents Preface Architecture at a Glanc...
Detailed explanation of the idea of implementing dynamic effect of lyrics progress text color filling change using CSS3
When playing music, the lyrics will gradually fil...
In-depth understanding of the use of r2dbc in MySQL
Introduction MySQL should be a very common databa...
Vue realizes price calendar effect
This article example shares the specific code of ...
CentOS 8 custom directory installation nginx (tutorial details)
1. Install tools and libraries # PCRE is a Perl l...
WeChat applet realizes horizontal and vertical scrolling
This article example shares the specific code for...
Detailed explanation of JavaScript closure issues
Closures are one of the traditional features of p...
HTML code to add quantity badge to message button
HTML code: <a onclick="goMessage();"...
Detailed explanation of Vue life cycle
Table of contents Why understand the life cycle W...
Sublime / vscode quick implementation of generating HTML code
Table of contents Basic HTML structure Generate s...
Analysis of the solution to Nginx Session sharing problem
This article mainly introduces the solution to th...
JavaScript implements select all and unselect all operations
This article shares the specific code for JavaScr...