用HTML和css写一个16:9的矩形

作者: 撕心裂肺1232 | 来源:发表于2019-03-17 14:20 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        /* .wrap:包裹矩形的div，用来控制矩形的大小 */
        .wrap{
            width: 20%;
        }
        /* .box 矩形div，宽度是.wrap的百分百，这主要是为了方便高度的计算 */
        .box{
            width: 100%;
            /*防止矩形被里面的内容撑出多余的高度*/
            height: 0px;
            /* 16:9padding-bottom:65.25%，4:3padding-bottom:75% */
            padding-bottom: 65.25%;
            position: relative;
            background: pink;
        }
        /* 矩形里面的内容 ，要设置position：absolute，才能设置内容高度100%和矩形一样 */
        .box p{
            width: 100%;
            height: 100%;
            position: absolute;
            color: #666;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box">
        <p>&nbsp;&nbsp;这是一个16：9的矩形</p>
    </div>
</div>
</body>
</html>