井井客

搜索

CSS实现16:9比例自适应的矩形

CSS实现宽度自适应,宽高16:9的比例的矩形。

首先要知道,margin-top、margin-bottom、padding-top、padding-bottom的百分比值是按照父元素宽度进行计算的。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html, body, div {
            padding: 0;
            margin: 0;
        }

        .box-warp {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
            background: #222;
        }
    </style>
</head>
<body>
    <div class="box-warp"></div>
</body>
</html>
思路:设置一个元素宽度100%,高度0,padding-bottom因为是按照宽度计算,所以设置成高/宽百分比(9/16 = 56.25%)。这时这个元素实际大小就是一块16:9的矩形了,只是里面不适合添加文档流内容。
如果想要在里面填写内容的话,需要为该元素添加一个子元素,用绝对定位,宽高设置为100%就可以继承这个矩形的尺寸,然后在这个子元素里添加内容就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html, body, div {
            padding: 0;
            margin: 0;
        }

        .box-warp {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
        }

        .box {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #222;

            /* 设置文字 */
            color: #fff;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="box-warp">
        <div class="box">这是一块16:9的屏幕</div>
    </div>
</body>
</html>

文章TAG:CSS

作者:井井客整理来源:原创
本文标题:CSS实现16:9比例自适应的矩形
本文链接:/c/28343.html

上一篇:WebSocket与Http和Https的区别
下一篇:整理CSS实现右边宽度固定左边自适应

文章分类

相关阅读

随便看看