系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网页制作 > CSS > 详细页面

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

时间:2020-11-26来源:www.pcxitongcheng.com作者:电脑系统城

现在我们来讲讲做自适应16:9的矩形要怎么做

第一步先计算高度,假设宽100%,那么高为h=9/16=56.25%

第二步利用之前所说设置padding-bottom方法实现矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        /* .wrap:包裹矩形的div,用来控制矩形的大小 */
        .wrap{
            width: 20%;
        }
        /* .box 矩形div,宽度是.wrap的百分百,这主要是为了方便高度的计算 */
        .box{
            width: 100%;
                        /*防止矩形被里面的内容撑出多余的高度*/
            height: 0px;
            /* 16:9padding-bottom:56.25%,4:3padding-bottom:75% */
            padding-bottom: 56.25%;
            position: relative;
            background: pink;
        }
        /* 矩形里面的内容 ,要设置position:absolute,才能设置内容高度100%和矩形一样 */
        .box p{
            width: 100%;
            height: 100%;
            position: absolute;
            color: #666;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box">
                <p>&nbsp;&nbsp;这是一个16:9的矩形</p>
            </div>
        </div>
    </body>

类似不同的比例矩形,都可以用这种方法实现

到此这篇关于CSS实现宽度自适应宽高16:9的矩形的示例的文章就介绍到这了,更多相关CSS 宽度自适应宽高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章

分享到:

相关信息

  • 纯CSS实现具有渐变和圆角的彩色边框

    传统的灰色纯色边框你是不是觉得太难看了?你是否想设计一些精美的边框,例如渐变、圆角、彩色的边框?那你来对地方了,本文将介绍如何用纯CSS就能实现具有渐变和圆角的彩色边框...

    2023-03-06

  • css圆角三角形的实现代码

    今天给大家带来一个如何实现圆角三角形的方案,这个方案虽然可以实现,但是也是借助拼凑等方式来实现的,假如想一个div来实现圆角三角形,还是比较困难的。之前文章讲了如何实现对话框,里面介绍了三角形的实现方式。今天讲讲...

    2023-03-06

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载